javascript - How to renumber remaining table rows after .hide() -

javascript - How to renumber remaining table rows after .hide() -

the javascript increments each visible number in these dynamically generated rows of static table. jquery dutifully hides each row when clicked, but, of course, numbers don't change. how can utilize jquery re-number rows when visitor done removing unwanted lines? want user click 'renumber' renumber remaining rows correctly. have didn't work :-)

help appreciated.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script language="javascript" type="text/javascript"> var keeptrack = 1; </script> <table> <tr><td colspan="2" id="renumber">renumber</td></tr> <tr id="swh1"> <td> <script> document.write(keeptrack);keeptrack++; </script></td> <td>somewordshere</td></tr> <script> $(document).ready(function() { $("#swh1").click(function() { $("#swh1").hide(100);}); });</script> <tr id="swh2"> <td> <script> document.write(keeptrack);keeptrack++; </script></td> <td>somewordshere</td></tr> <script> $(document).ready(function() { $("#swh2").click(function() { $("#swh2").hide(100);}); });</script> <tr id="swh3"> <td> <script> document.write(keeptrack);keeptrack++; </script></td> <td>somewordshere</td></tr> <script> $(document).ready(function() { $("#swh3").click(function() { $("#swh3").hide(100);}); });</script> </table> <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#renumber").click(function() { 'magically renumber remaining table rows' }); }); </script>

the straightforward answer

to renumber rows can utilize each() method allows iterate on set of elements (the rows in case) , provides i enumerator parameter.

a general example:

$(some-tr-selector).each(function(i) { $(this).children(some-td-selector).text(i+1); });

now this, you'll need define improve selectors. problem current code selectors specific. prevents creating general event handlers, instead of creating click handler each row.

how improve code

consider setting class relevant numbered rows. allow create single click handler rows , create relevant rows much easier select when renumbering.

for example:

html

<table> <tr><td colspan="2" id="renumber">renumber</td></tr> <tr class="numbered_row"> <td class="row_number"></td> <td>somewordshere</td> </tr> <tr class="numbered_row"> <td class="row_number"></td> <td>somewordshere</td> </tr> <tr class="numbered_row"> <td class="row_number"></td> <td>somewordshere</td> </tr> ... </table>

javascript

$(document).ready(function() { // number rows onload $('table tr.numbered_row').each(function(i) { $(this).children('.row_number').text(i+1); }); // row click handler $('table tr.numbered_row').on('click', function() { $(this).hide(100); }); // renumber click handler $('#renumber').on('click', function() { $('table tr.numbered_row:visible').each(function(i) { // iterate on _visible_ rows $(this).children('.row_number').text(i+1); }); }); });

note how adding 2 classes numbered_row , row_number able efficiently in 1 block of code: initial numbering of rows, single click handler hide them , renumbering action.

an more general approach

if wanted, create more general , efficient, chaining each() , on() methods handling renumbering within on() each time row hidden.

for example:

$(document).ready(function() { // number rows onload $('table tr.numbered_row').each(function(i) { $(this).children('.row_number').text(i+1); // row click handler }).on('click', function() { // hide current row $(this).hide(100); // renumber visible rows $('table tr.numbered_row:visible').each(function(i) { // iterate on _visible_ rows $(this).children('.row_number').text(i+1); }); }); });

javascript jquery table