如何使用jquery / javascript為html中的ID列生成並分配唯一編號

Question

在id列中，我需要在添加新行時動態添加自動生成的ID值

<table>
<tr>
    <th>Employee Id</th>
    <th>Employee Name</th>
    <th>Salary</th>
    <th>Email</th>              
</tr>
<tr>
   <td ></td>// for id
   <td><input type="text" id="new_name"></td>
   <td><input type="text" id="new_salary"></td>
   <td><input type="text" id="new_email"></td>
</tr>

</table>

Answer 1

一種可能的解決方案是聲明一個計數器變量以跟蹤已生成的行數。 然后，當您添加新行時，可以將其id屬性設置為此變量。

 var index = 1; $("#new-row").on("click", function() { var name = $("#new_name").val(); var salary = $("#new_salary").val(); var email = $("#new_email").val(); $("table").html($("table").html() + "<tr id='row" + index + "'><td>" + index + "<td>" + name + "</td><td>" + salary + "</td><td>" + email + "</td></tr>"); index++; }); 

 #row1 { background: red; } #row2 { background: orange; } #row3 { background: yellow; } td { text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Employee Id</th> <th>Employee Name</th> <th>Salary</th> <th>Email</th> </tr> <tr> <td ></td>// for id <td><input type="text" id="new_name"></td> <td><input type="text" id="new_salary"></td> <td><input type="text" id="new_email"></td> </tr> </table> <button id="new-row">Generate new row</button>