使用rowIndex时负cloneNode

Question

我需要在用rowIndex动态创建的行中检索cloneNode。在弄清楚它正在发生什么的时候，我意识到rowIndex在同一浏览器(IE)上是肯定的，但在另一台机器上运行。知道吗，我在这里错过了什么？谢谢！

JSFIDDLE: https://jsfiddle.net/sLxrL9pL/15/

代码：

​

function cloneMe() {
  var howManyRows = 3;
  var table = window.document.getElementById("myTable");
  var row = window.document.getElementById("rowToClone");
  var clone;
    
  for (var i = 0; i < howManyRows; i++) {
    clone = row.cloneNode(true);
    //clone.id = "test" + i;
    table.appendChild(clone);
  }
}

<table id="myTable">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
    
  <thead>
    <tr>
      <td name="A">A</td>
      <td name="B">B</td>
      <td name="C">C</td>
    </tr>
  </thead>
  <tbody id="mybody">
    <tr id="rowToClone">
      <td><input name="A"></td>
      <td><input name="B"></td>
      <td><input name="C" onclick="alert(this.parentNode.parentNode.rowIndex)"></td>
    </tr>
  </tbody>
</table>
            
<button id="btn" onClick="cloneMe()">Clone me</button>

​

Answer 1

您需要将克隆节点追加到表tbody的.try节中，如下所示：

​

<table id="myTable">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <td name="A">A</td>
      <td name="B">B</td>
      <td name="C">C</td>
    </tr>
  </thead>
  <tbody id="mybody">
    <tr id="rowToClone">
      <td><input name="A"></td>
      <td><input name="B"></td>
      <td><input name="C" onclick="alert(this.parentNode.parentNode.rowIndex)"></td>
    </tr>
  </tbody>
</table>
        
<button id="btn" onClick="cloneMe()">Clone me</button>
        
<script type="text/javascript">
    
    function cloneMe() {
        var howManyRows = 3;
        var table = window.document.getElementById("myTable");
        var row = window.document.getElementById("rowToClone");
        var clone;
        var tbody = table.tBodies[0];//get the body 
        for (var i = 0; i < howManyRows; i++) {
            clone = row.cloneNode(true);
            var len = table.rows.length;
            //clone.id = "test" + i;
           
            tbody.appendChild(clone);//append to body
        }
    }
</script>                                           

​