How to generate and assign unique number for an ID column in html using jquery/javascript

Question

At id column I need to add auto generated ID value dynamivcally when I added a new row

<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>

Better place to start - why do you (think you) need to do this? — Adam Jenkins, Jul 20 '16 at 16:21
see http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript and add a letter in front — fehrlich, Jul 20 '16 at 16:24
I hope you realize generating sequential IDs in client-side won't mean they'll be globally unique, just on that page? — John Dvorak, Jul 20 '16 at 16:25
Good point from @JanDvorak - what sort of "ID" are you looking for? a GUID? An Identity column from a DB? Just the next row indicator? `var id = $("table tr").length + 1` ? — freedomn-m, Jul 20 '16 at 16:26

Richard Hamilton · Answer 1 · 2016-07-20T16:38:35.373

One possible solution is to declare a counter variable to keep track of how many rows have been generated. Then when you append a new row, you can set it's id attribute to this variable.

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>

How to generate and assign unique number for an ID column in html using jquery/javascript

1 Answers1