0

我们在下面有一个脚本，它动态添加行。在 addRow 函数中，我们有这个代码 alert(newcell.childNodes[0].type); 捕获子节点类型。它仅将第一列显示为复选框，但其余所有列均显示为未定义。除了第 4 列，我们有多个子节点，一个按钮，还有一个表？那么如何知道它们的类型呢？

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

                     }
              }
4

2 回答 2

2

childNodes属性包括文本节点，因此您指的是元素newcell.childNodes[0]之前的空白。select

相反，您应该这样做：

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

或者

newcell.childNodes[0].getElementsByTagName('input')[0]
于 2012-09-19T04:17:40.277 回答
1

请注意，脚本元素的语言属性在 HTML 4 中已被弃用，并在 HTML5 中被删除。type 属性是必需的。

在您的代码中：

    function addRow(tableID) {

        var table = document.getElementById(tableID);

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

无需添加参数，没有参数会将行添加到表的末尾。如果在所有修改完成后将节点附加到 DOM，这样的操作通常会更快。

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

    }
 }

如果您只是创建现有行的克隆，则上述所有内容都可以替换为以下内容：

// Get the first tbody
var tbody = table.tbodies[0];

// Clone the second row
var newRow = tbody.rows[1].cloneNode(true);

/*
   Do whatever with newRow, like change element names and IDs to 
   suitble values
*/

tbody.appendChild(newRow);

请注意，如果您将标题行放在表头部分，则可以克隆 tbody 的第一行（即 table.tbody[0].rows[0]），但始终向 tBody 添加行，因为旧版本的 IE如果您附加到表格，将会呕吐。 insertRow避免了这种情况，但速度很慢。

删除行时，您可以执行以下操作：

        var i = table.rows.length;
        var chkbox;

        while (i--) { 
            chkbox = table.rows[i].getElementsByTagName('input')[0];

            if (chkbox && chkbox.checked) {
                if (table.rows.length < 1) { 

                    /* error */

                } else {
                    table.deleteRow(i);
                }
            }
        }
于 2012-09-19T04:38:44.737 回答