インデックステーブル行のJS/jQueryの

Question

私は、インデックスに私のテーブルの行をトラインが、失敗してきました。私ができる最善の策は、新しいテーブルの行を追加するたびに、テーブルのすべての行を再インデクシングできるコードが出てくるが、それはうまくいかない。私は何か構文に間違っていると思うが、私は何がわからない。 JSパーツ：

$("#pridet").click(function(){ 
    $("table tbody tr").first().clone().prependTo("table tbody"); 
    var x = document.getElementsByTagName("tr"); 
    document.getElementsByName("tabelis").innerHTML = x.rowIndex; 
}); 

私は何かが第二部と致命的に間違っている実感htmlファイルに

コード（多分何インデックスを書き込む場所を指示するように？）：

<button id = "pridet">pridet</button> 
    <table id="myTable" class="table table-inverse"> 
    <thead id = "headings" class = "thead-default"> 
     <tr> 
     <th>Tabelio Nr.</th> 
     <th>Vardas</th> 
     <th>Pavardė</th> 
     <th>Pareigos</th> 
     <th>Bazinė alga, €</th> 
     <th>Valandinis atlyginimas, €</th> 
     <th>Veiksmai</th> 
     </tr> 
    </thead> 
    <tfoot class = "thead-default"> 
     <tr> 
     <td>Vidurkis</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>10000</td> 
     <td>17.3</td> 
     <td></td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
     <td class = "tabelis">1</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td>bla</td> 
     <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
     <td> 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p> 
     </td> 
     </tr> 
     <tr> 
     <td class = "tabelis">2</td> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
     <td>bla</td> 
     <td>blum</td> 
     <td> 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
     </td> 
     </tr> 
     <tr> 
     <td class = "tabelis">3</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
     <td>bla</td> 
     <td>blum</td> 
     <td> 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    <script src="script.js" charset="utf-8"></script> 
    <script> 
    function deleteRow(r) { 
    var i = r.parentNode.parentNode.rowIndex; 
    document.getElementById("myTable").deleteRow(i); 
    }; 
    </script> 

私はおそらく可能性このような行の総数を数えてください。

$("#counter").text($("table tbody tr").length); 

テーブルのセルへのT番号何とか

EDITは：この前に言及didntは、しかし、あなたが持っているので、テーブルの行は、EBに（thead要素の下に）テーブルの上部にある

Answer 1

を追加しましたボディ行の最初の列の行インデックスは、それぞれを選択することができます。

$('#myTable tbody tr td:nth-child(1)') 

​​3210を更新してすべてのインデックスを更新します。

function updateRowIndex() { 
 
    $('#myTable tbody tr td:nth-child(1)').each(function(idx, ele) { 
 
     ele.textContent = idx + 1; 
 
    }); 
 
} 
 

 
function deleteRow(r) { 
 
    var i = r.parentNode.parentNode.rowIndex; 
 
    document.getElementById("myTable").deleteRow(i); 
 
    updateRowIndex(); 
 
}; 
 

 
$("#pridet").on('click', function(e) { 
 
    $("table tbody tr").first().clone().prependTo("table tbody"); 
 
    var x = document.getElementsByTagName("tr"); 
 
    document.getElementsByName("tabelis").innerHTML = x.rowIndex; 
 
    updateRowIndex(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id = "pridet">pridet</button> 
 
<table id="myTable" class="table table-inverse"> 
 
    <thead id = "headings" class = "thead-default"> 
 
    <tr> 
 
     <th>Tabelio Nr.</th> 
 
     <th>Vardas</th> 
 
     <th>Pavardė</th> 
 
     <th>Pareigos</th> 
 
     <th>Bazinė alga, €</th> 
 
     <th>Valandinis atlyginimas, €</th> 
 
     <th>Veiksmai</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot class = "thead-default"> 
 
    <tr> 
 
     <td>Vidurkis</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td>10000</td> 
 
     <td>17.3</td> 
 
     <td></td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td class = "tabelis">1</td> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
     <td>bla</td> 
 
     <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
 
     <td> 
 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> 
 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class = "tabelis">2</td> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
     <td>bla</td> 
 
     <td>blum</td> 
 
     <td> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class = "tabelis">3</td> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
     <td>bla</td> 
 
     <td>blum</td> 
 
     <td> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

$("#pridet").click(function(){ 
 
    var new_row = $("table tbody tr").first().clone(); 
 
    $('table tbody').append(new_row); 
 
    $('table tr:last').find('td:first').html($('table tbody tr').length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id = "pridet">pridet</button> 
 
    <table id="myTable" class="table table-inverse" border='1'> 
 
    <thead id = "headings" class = "thead-default"> 
 
     <tr> 
 
     <th>Tabelio Nr.</th> 
 
     <th>Vardas</th> 
 
     <th>Pavardė</th> 
 
     <th>Pareigos</th> 
 
     <th>Bazinė alga, €</th> 
 
     <th>Valandinis atlyginimas, €</th> 
 
     <th>Veiksmai</th> 
 
     </tr> 
 
    </thead> 
 
    <tfoot class = "thead-default"> 
 
     <tr> 
 
     <td>Vidurkis</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td>10000</td> 
 
     <td>17.3</td> 
 
     <td></td> 
 
     </tr> 
 
    </tfoot> 
 
    <tbody> 
 
     <tr> 
 
     <td class = "tabelis">1</td> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
     <td>bla</td> 
 
     <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
 
     <td> 
 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> 
 
      <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class = "tabelis">2</td> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
     <td>bla</td> 
 
     <td>blum</td> 
 
     <td> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class = "tabelis">3</td> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
     <td>bla</td> 
 
     <td>blum</td> 
 
     <td> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> --> 
 
      <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> --> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table>