Question

我有一个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">&nbsp;</td>
    <td class="auto-style12">Type</td>
    <td class="auto-style15">&nbsp;</td>
    <td class="auto-style14">Subtype</td>
    <td class="auto-style16">&nbsp;</td>
    <td class="auto-style17">SKU</td>
    <td class="auto-style10">&nbsp;</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>&nbsp;</td>
  </tr>
</table>

这是jQuery。每次点击，都会添加一行。

<script>
function arrangeSno() {
  var i = 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>&nbsp;</td>";
    $('#item').append(trow);
  });
});

$(document).on('click', 'button.Button51', function () {
  $(this).closest('tr').remove();
  arrangeSno();
  return false;
});
</script>

问题是我试图在文本框上运行JavaScript函数，但它只运行第一行而不是新添加的行。我认为这是一个独特的ID问题。

如何为每个元素指定唯一值。

Answer 1

你想要这样吗......？

Fiddle

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">&nbsp;</td>
    <td class="auto-style12">Type</td>
    <td class="auto-style15">&nbsp;</td>
    <td class="auto-style14">Subtype</td>
    <td class="auto-style16">&nbsp;</td>
    <td class="auto-style17">SKU</td>
    <td class="auto-style10">&nbsp;</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>&nbsp;</td>
  </tr>
</table>
<button id='Button19'>Add Row</button>

JS：

function arrangeSno() {


 var i = 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>&nbsp;</td>";
    $('#item').append(trow);
  });
});

$(document).on('click', 'button.Button51', function () {
  $(this).closest('tr').remove();
  arrangeSno();
  return false;
});

如何为动态Html表中的每个元素分配唯一ID

1 个答案: