2017-06-06 90 views
0

我一直在嘗試索引我的錶行但未成功。我能做的最好的是提出代碼,可以重新索引表中的每一行,每當我添加新的表格行時,但它不起作用。我認爲語法有些問題,但我不確定是什麼。 JS部分:索引錶行js/jquery

$("#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); 

,並使用該值inser T編號爲表格單元格莫名其妙

編輯:didnt之前提到這一點,但表中的行必須EB添加在表的頂部(以下THEAD)

+0

嘗試在表的底部添加行。計算表中的行數,並將計數加1,並將其推入最後一行的第一個td中。 – Sinha

回答

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>

+0

這工作很好,除了當我試圖刪除行。我遇到了一個問題。也就是說,如果deleteRow函數在單獨的js文件上,只有在腳本部分的主html中時才執行。任何想法爲什麼? – NulisDefo

+0

@NulisDefo你需要爲jQuery包含單獨的js文件。在使用功能之前, – gaetanoM

+1

根據w3schools的例子,如果任何人遇到類似的東西,我就把代碼放在'$(document).ready(function(){})'中。有了這個固定的,你的建議完美無瑕。需要看看每個()更多 – NulisDefo

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>

+0

非常感謝。我已經達到了相似的結果。現在我試圖達到它將索引每個錶行 – NulisDefo

+0

@NulisDefo請接受答案,如果它幫助你,並幫助他人輕鬆找到答案。 – Sinha