getElementById（）仅显示动态表中第一行的详细信息

Question

有3个功能：

1. 用于使用“添加”按钮向动态表添加行

   var count=0;
   function addRow(tableID) {
   
       var table = document.getElementById(tableID);
   
       var rowCount = table.rows.length;
       var row = table.insertRow(rowCount);
   
       var cel1 = row.insertCell(0);
       var element1 = document.createElement("input");
       element1.type = "checkbox";
       element1.name="chkbox[]"+count;
       element1.id="chk[]"+count;
       cel1.appendChild(element1);
   
   
       var cel2 = row.insertCell(1);
       var element2 = document.createElement("input");
       element2.type = "text";
       element2.name = "txtbox[]"+count;
       element2.id="nam[]"+count;
       cel2.appendChild(element2);
   
       var cel3 = row.insertCell(2);
       var element3 = document.createElement("input");
       element3.type = "text";
       element3.name = "txtbox[]"+count;
       element3.id="cit[]"+count;
       cel3.appendChild(element3);
   
   
            count++;
   
   }
   

2. 用于使用“删除”按钮从动态表中删除选中的行

    function deleteRow(tableID) {
       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;
   
       for(var i=0; i<rowCount; i++) {
           var row = table.rows[i];
           var chkbox = row.cells[0].childNodes[0];
           if(chkbox !=null && chkbox.checked==true) {
               table.deleteRow(i);
               rowCount--;
               i--;
           }
   
   
       }
   

3. 用于在新窗口中使用“显示详细信息”按钮显示在每个选中行的文本框中输入的值

            function display(tableID){
       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;
   
       for(var i=0; i<rowCount; i++) {
   
           var row = table.rows[i];
           var chkbox = row.cells[0].childNodes[0];
           if(chkbox !=null && chkbox.checked==true) {
              var x=(document.getElementById('nam').value);
              var y=(document.getElementById('cit').value);
              document.body.innerHTML="Name: "+x +" City: "+ y;
              //document.body.innerHTML=y;
              //alert(x+","+y);
   
   
          }
   
        }
      }
   

问题在于，“显示详细信息”按钮仅显示了在第一行的文本框中输入的值。对于添加的表的其他行，输出为空白。

我试图显示使用getElementById（）在文本框中输入的值。但是仅第一行文本框有ID。如何为添加的行的文本框创建动态ID？如何在代码中加入相同的内容？

HTML：

<INPUT type="button" value="Delete" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="450px" border="1">
    <TR>
        <TD> </TD>
        <TD>Name </TD>
        <TD> City </TD>
    </TR>
    <TR>
        <TD><INPUT type="checkbox" id="chk" name="chk"/></TD>
        <TD> <INPUT name="text1" id="nam" type="text" /> </TD>
        <TD> <INPUT name="text2" id="cit" type="text" /> </TD>
    </TR>
    <INPUT type="button" value="Display Details" onclick="display('dataTable');"/>
</TABLE>

Answer 1

第一次执行此操作时...

document.body.innerHTML="Name: "+x +" City: "+ y;

...您已经删除了文档的其余部分，因此不再需要遍历表。

不是用该输出替换整个文档正文，而是将其附加到文档中某些现有元素上。

Answer 2

function GetCellValues() {
var rows = document.getElementById('dataTable').
getElementsByTagName('tbody')    [0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = function() {
       alert(document.getElementById("nam[]"+(this.rowIndex + 1)).value   );

    }
    }

 }

我有一个ID为ID的单元格：

var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.value="Tipo";
element2.id="nam[]"+count;
cell3.appendChild(element2);

和单元格类型按钮（对我而言：）：

var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "button";
element3.value="Enviar e-mail";
element3.onclick= function() { GetCellValues(); };
cell4.appendChild(element3);

对我来说还可以。