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为

的单元格

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);

对我来说没问题。

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

2 个答案: