如何使用jQuery/Javascript为动态创建的表格行添加ID

I’ve got the "Add Row" button working to dynamically create table rows, but I’m stuck on how to assign dynamic IDs to each element in the new rows—this is so I can collect all the data and send it to the server as JSON. Here’s my current code:

<table id="billTable" style="">
  <tr>
    <th>Sr no</th>
    <th>Product/Service </th>
    <th>HSN / ACS</th>
    <th>UOM</th>
    <th>Qty</th>
    <th>Rate</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td><div id="Psno">1</div></td>
    <td><div id="PproductName" contenteditable>Product/Service</div></td>
    <td><div id="PHSN" contenteditable></div></td>
    <td><div id="PUOM" contenteditable>BOXES</div></td>
    <td><div id="PQty" contenteditable>6</div></td>
    <td><div id="PRate" contenteditable>6.10</div></td>
    <td><div id="PAmount">--</div></td>
  </tr>
</table>
<div class="pull-right">
  <label><button type="checkbox" id="AddTable" value=""> Add Row</button></label>
</div>
<script>
$('#AddTable').click(function() {
  $("#billTable").append(" <tr> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> </tr>");
});
</script>

Solution: Use a Counter for Unique IDs #

The simplest approach is to track the number of rows with a counter, then generate IDs that include this counter value (like Psno_2, PproductName_2 for the second row). Here’s how to adjust your code:

1. Update the initial row’s IDs to follow a consistent pattern (add _1 since it’s the first row):

<tr>
  <td><div id="Psno_1">1</div></td>
  <td><div id="PproductName_1" contenteditable>Product/Service</div></td>
  <td><div id="PHSN_1" contenteditable></div></td>
  <td><div id="PUOM_1" contenteditable>BOXES</div></td>
  <td><div id="PQty_1" contenteditable>6</div></td>
  <td><div id="PRate_1" contenteditable>6.10</div></td>
  <td><div id="PAmount_1">--</div></td>
</tr>

2. Modify the JavaScript to use a counter, increment it each time a row is added, and inject the counter into the IDs:

// Initialize counter with the number of existing data rows (excluding the header)
let rowCounter = $("#billTable tr").length - 1;

$('#AddTable').click(function() {
  rowCounter++; // Increment for the new row
  const newRow = `
    <tr>
      <td><div id="Psno_${rowCounter}" contenteditable></div></td>
      <td><div id="PproductName_${rowCounter}" contenteditable></div></td>
      <td><div id="PHSN_${rowCounter}" contenteditable></div></td>
      <td><div id="PUOM_${rowCounter}" contenteditable></div></td>
      <td><div id="PQty_${rowCounter}" contenteditable></div></td>
      <td><div id="PRate_${rowCounter}" contenteditable></div></td>
      <td><div id="PAmount_${rowCounter}" contenteditable></div></td>
    </tr>
  `;
  $("#billTable").append(newRow);
});

Bonus: Collect Data into JSON #

Once you have the dynamic IDs, you can loop through each row to collect the data into a JSON array ready for submission:

function collectTableData() {
  const data = [];
  const rowCount = $("#billTable tr").length - 1; // Exclude header

  for (let i = 1; i <= rowCount; i++) {
    data.push({
      srNo: $(`#Psno_${i}`).text(),
      productName: $(`#PproductName_${i}`).text(),
      hsn: $(`#PHSN_${i}`).text(),
      uom: $(`#PUOM_${i}`).text(),
      qty: $(`#PQty_${i}`).text(),
      rate: $(`#PRate_${i}`).text(),
      amount: $(`#PAmount_${i}`).text()
    });
  }

  // Convert to JSON string
  const jsonData = JSON.stringify(data);
  console.log(jsonData);
  // Send to server using $.ajax or fetch API here
}

This way, every row’s elements have a unique, predictable ID, making it easy to map each field to your JSON structure.

内容的提问来源于stack exchange，提问作者compsy