Wie generieren und eindeutige Nummer für eine ID-Spalte in html zuweisen mit Jquery/javascript

Question

Bei id-Spalte muss ich hinzufügen, Auto-ID-Wert erzeugt dynamivcally, wenn ich eine neue Zeile

hinzugefügt

<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

Eine mögliche Lösung ist Deklarieren Sie eine Zählervariable, um zu verfolgen, wie viele Zeilen generiert wurden. Wenn Sie dann eine neue Zeile anhängen, können Sie das ID-Attribut für diese Variable festlegen.

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>