CODEWITHSUNDEEP
javascripthtml
oldsport
oldsport

Reputation: 993

negative rowIndex when using cloneNode

I need to retrieve the rowIndex in rows that are dynamically created with cloneNode. While figuring out what it is going on, I recognized that the rowIndex gets positive on the same browser (IE), but running on another machine. Any idea, what I' missing here? Thx!

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

CODE:

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>

Upvotes: 0

Views: 56

Answers (1)

Suchit kumar
Suchit kumar

Reputation: 11869

You need to append the clone node in tbody section of the table .try this:

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

Upvotes: 2

Related Questions