javascript - 使用cloneNode时负rowIndex

Question

我需要检索使用cloneNode动态创建的行中的rowIndex。在弄清楚发生了什么情况时，我意识到 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 部分。尝试以下操作:

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