我们下面有一个脚本,该脚本可以动态添加行。在addRow函数中,我们有以下代码alert(newcell.childNodes [0] .type);捕获childnode类型。它仅将第一列显示为复选框,而其余所有都显示为未定义。此外,对于第四列,我们还有一个以上的子节点,其中有一个按钮和一个表?那么如何知道它们的类型呢?

<html>
<head>
    <script language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                newcell.innerHTML = newcell.innerHTML;
                alert(newcell.childNodes[0].type);

        }
     }

        function addSubRow2(subtbl){
            var table = document.getElementById(subtbl);
            var rowCount = table.rows.length;
      var a=document.getElementById(subtbl).insertRow(rowCount);
          var b=a.insertCell(0);
          var c=a.insertCell(1);
          b.innerHTML="TEST";
          c.innerHTML="<p class=error id='slaveIDError'>";


      /* var dropdown="<SELECT class=\"select\" name=\"country\">\n" +
                "<OPTION value=\"1\">Serial 1<\/OPTION>\n" +
                "<OPTION value=\"2\">Serial 2<\/OPTION>\n" +
                "<OPTION value=\"3\">Serial 3<\/OPTION>\n" +
                "<OPTION value=\"4\">Serial 4<\/OPTION>" +
                "<OPTION value=\"5\">Serial 5<\/OPTION>" +
                "<\/SELECT>";
       */


        //cell.innerHTML += "<br\/ >" + dropdown;
    }


        function deleteRow(tableID) {
            try {
            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(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            var table = document.getElementById(tableID);
            for (var i = 0, row; row = table.rows[i]; i++) {
                  row.id="row"+i;
               //iterate through rows
               //rows would be accessed using the "row" variable assigned in the for loop
               for (var j = 0, col; col = row.cells[j]; j++) {
                 //iterate through columns
                 //columns would be accessed using the "col" variable assigned in the for loop
                 //alert("J : "+j);
                 col.id="col"+i;
                 if(j==0)
                 {

                 }
                 else if(j==1)
                 {

                }
               }
            }

            }catch(e) {
                alert(e);
            }
        }

    </script>
</head>
<body>
  Begin Location : <select class='select' id="beginLocation" name="beginLocation">
                    <option value="1">Loc 1</option>
                    <option value="2">Loc 2</option>
                    <option value="3">Loc 3</option>
                    <option value="4">Loc 4</option>
                    <option value="5">Loc 5</option>
                </select>
                <p type="text" class=error id='beginLocation_Error'>
    <br\>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />

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

    <table id="dataTable" width="350px" border="1">
        <tr>
            <th></th>
            <th>Client</th>
          <th>Location</th>
          <th>Serial</th>
        </tr>

        <tr>
            <td id="col_0_0"><input type="checkbox" name="chk"/></td>
            <td id="col_0_1">
                <select class='select' id="client1" name="client1">
                    <option value="1">Client 1</option>
                    <option value="2">Client 2</option>
                    <option value="3">Client 3</option>
                    <option value="4">Client 4</option>
                    <option value="5">Client 5</option>
                </select><p type="text" class=error id='client_0_Error'>
            </td>

            <td id="col_0_1">
                <select class='select' id="location1" name="location1">
                  <option value="1">Loc 1</option>
                    <option value="2">Loc 2</option>
                    <option value="3">Loc 3</option>
                    <option value="4">Loc 4</option>
                    <option value="5">Loc 5</option>
                </select>
                <p type="text" class=error id='beginLocation_Error'>
            </td>

            <td id="col_0_3">
                <input type="button" value="Add Serial" onclick="addSubRow2('sub0');" />
                <br\>
                <table id="sub0">
                    <tr>
                        <td>
                            <select class='select' id="serial_0_1" name="serial_0_1">
                                <option value="1">Serial 1</option>
                                <option value="2">Serial 2</option>
                                <option value="3">Serial 3</option>
                                <option value="4">Serial 4</option>
                                <option value="5">Serial 5</option>
                            </select>
                       </td>
                       <td>
                         <input type="text" id="txt_0_1" name="txt_0_1">
                       </td>
                       <td>
                         <input type="button" value="Remove" onclick="removeSubRow2(this.parentNode);" />
                       </td>
                  </tr>
                  <tr>
                     <td>
                     <p  class=error id="selecterror_0_1">
                    </td>
                     <td>
                     <p class=error id="inputerror_0_1">
                    </td>
                    <td>

                    </td>
                  </tr>
                </table>

            </td>
        </tr>
    </table>

</body>
</html>


更新行和列ID的代码

var rows = table.querySelectorAll('[id^=row]');
          for (var i = 0, row; row = table.rows[i]; i++) {
                  row.id="row"+i;
                  row.name="row"+i;
                  var rowName = "row"+i;
                  for (var j = 0, col; col = row.cells[j]; j++) {
                     col.id="col_"+i+"_"+j;
                     col.name="col_"+i+"_"+j;

                     if(j==3)
                     {
                        alert(col.childNodes[0].getElementsByTagName('button')[0]);

                     }
              }

最佳答案

childNodes属性包括文本节点,因此通过执行newcell.childNodes[0]可以引用select元素之前的空白。

相反,您应该这样做:

newcell.childNodes[0].getElementsByTagName('select')[0]


要么

newcell.childNodes[0].getElementsByTagName('input')[0]

10-06 02:29