javascript - How To Assign Unique Id To Every Element In Dynamic Html Table -
i have html table
<table id="item" style="width:100%; align-content:center"> <tr> <td class="auto-style7">seq no</td> <td class="auto-style9">item code</td> <td class="auto-style10"> </td> <td class="auto-style12">type</td> <td class="auto-style15"> </td> <td class="auto-style14">subtype</td> <td class="auto-style16"> </td> <td class="auto-style17">sku</td> <td class="auto-style10"> </td> <td class="auto-style19">inv qty</td> <td class="auto-style20">inv price</td> <td class="auto-style21">discount amt</td> <td class="auto-style22">total</td> <td class="auto-style24">del</td> <td> </td> </tr> </table> this jquery. on each click, anew row added.
<script> function arrangesno() { var = 0; $('#item tr').each(function () { $(this).find(".sno").html(i); i++; }); } $(document).ready(function () { $('#button19').click(function () { var sno = $('#item tr').length; trow = "<tr><td class=\"auto-style7\"><input id=\"txt_61\" name=\"srno\" class=\"auto-style8\" type=\"text\" value='" + sno + "'/></td><td class=\"auto-style9\"><input id=\"txt_62\" name=\"itemcode\" type=\"text\" class=\"auto-style25\" onblur=\"itemval()\"/></td><td class=\"auto-style10\"><input id=\"button20\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style12\"><input id=\"txt_63\" name=\"type\" type=\"text\" /></td><td class=\"auto-style15\"><input id=\"button21\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style14\"><input id=\"txt_64\" name=\"subtype\" type=\"text\" class=\"auto-style13\" /></td><td class=\"auto-style16\"> <input id=\"button22\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style17\"><input id=\"txt_65\" name=\"sku\" type=\"text\" class=\"auto-style19\" /></td><td class=\"auto-style10\"><input id=\"button23\" class=\"auto-style18\" type=\"button\" value=\"?\" /></td> <td class=\"auto-style19\"><input id=\"txt_66\" name=\"invqty\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style20\"><input id=\"txt_67\" name=\"invprice\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style21\"> <input id=\"txt_68\" name=\"discount\" type=\"text\" class=\"auto-style20\" /></td><td class=\"auto-style22\"> <input name=\"total\" id=\"txt_69\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style24\"><input id=\"checkbox1\" class=\"auto-style23\" type=\"checkbox\" /></td> <td> </td>"; $('#item').append(trow); }); }); $(document).on('click', 'button.button51', function () { $(this).closest('tr').remove(); arrangesno(); return false; }); </script> the problem trying run javascript function on textboxes, runs first row , not on newly added rows. think issue of unique id.
how assign unique values each element.
do want this...?
html :
<table id="item" style="width:100%; align-content:center"> <tr> <td class="auto-style7">seq no</td> <td class="auto-style9">item code</td> <td class="auto-style10"> </td> <td class="auto-style12">type</td> <td class="auto-style15"> </td> <td class="auto-style14">subtype</td> <td class="auto-style16"> </td> <td class="auto-style17">sku</td> <td class="auto-style10"> </td> <td class="auto-style19">inv qty</td> <td class="auto-style20">inv price</td> <td class="auto-style21">discount amt</td> <td class="auto-style22">total</td> <td class="auto-style24">del</td> <td> </td> </tr> </table> <button id='button19'>add row</button> js :
function arrangesno() { var = 0; $('#item tr').each(function () { $(this).find(".sno").html(i); i++; }); } $(document).ready(function () { $('#button19').click(function () { var sno = $('#item tr').length; trow = "<tr><td class=\"auto-style7\"><input id=\"txt_61\" name=\"srno\" class=\"auto-style8\" type=\"text\" value='" + sno + "'/></td><td class=\"auto-style9\"><input id=\"txt_62\" name=\"itemcode\" type=\"text\" class=\"auto-style25\" onblur=\"itemval()\"/></td><td class=\"auto-style10\"><input id=\"button20\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style12\"><input id=\"txt_63\" name=\"type\" type=\"text\" /></td><td class=\"auto-style15\"><input id=\"button21\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style14\"><input id=\"txt_64\" name=\"subtype\" type=\"text\" class=\"auto-style13\" /></td><td class=\"auto-style16\"> <input id=\"button22\" class=\"auto-style11\" type=\"button\" value=\"?\" /></td><td class=\"auto-style17\"><input id=\"txt_65\" name=\"sku\" type=\"text\" class=\"auto-style19\" /></td><td class=\"auto-style10\"><input id=\"button23\" class=\"auto-style18\" type=\"button\" value=\"?\" /></td> <td class=\"auto-style19\"><input id=\"txt_66\" name=\"invqty\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style20\"><input id=\"txt_67\" name=\"invprice\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style21\"> <input id=\"txt_68\" name=\"discount\" type=\"text\" class=\"auto-style20\" /></td><td class=\"auto-style22\"> <input name=\"total\" id=\"txt_69\" type=\"text\" class=\"auto-style13\" /></td> <td class=\"auto-style24\"><input id=\"checkbox1\" class=\"auto-style23\" type=\"checkbox\" /></td> <td> </td>"; $('#item').append(trow); }); }); $(document).on('click', 'button.button51', function () { $(this).closest('tr').remove(); arrangesno(); return false; });
Comments
Post a Comment