While we have been concentrating on just working with client-side code, at some point you are going to have to send the data back to the server. In addition, you will most likely get data from a server as well. Most of us assign a primary key (unique number) to each row of data. This ‘ID’ can be used to identify each row of data within the table. In this blog post you will see how you might use a primary key when manipulating data within a table.

NOTE: You should probably go back and read the previous blog posts in order to see what we are doing with tables.

The HTML

The HTML is exactly like that shown in my last blog post. I am presenting it here just so you can see it in its entirety.

Figure 1: Use a unique ID for editing and deleting records in a table

Add Two Variables

When adding a new record, you assign a new unique ID to that record. This means you need a variable within your <script> tag that is not a part of any function. This makes that variable global to this page. Let’s call this variable ‘nextId’. You also want to keep track of the record you are currently editing if the user clicks on the edit button. Let’s call this variable ‘currentId’. The code to do this is shown below.

Building a Row for the Table

You will either use the nextId variable or the currentId variable when you build a row to be added to your HTML table. So you build your buildPersonTableRow() function to accept a parameter called ‘id’ to which you can pass either of those two variables. This unique number will be added into a data- attribute on each button. The code to do this is shown below:

Getting the Current ID

When the user clicks on the Edit button in the table, you call the displayPerson() function passing in the Edit button. In this function is where you need to grab the data- attribute that contains the unique id and assign it to the ‘currentId’ variable. The displayPerson() function is shown below:

This function retrieves the current row the user clicked on using the parents() function on the ‘Edit’ button passed in and locating the <tr> tag. Once you have the row of the table you can use the children() function to retrieve an array of all of the <td> elements for that row. Since the Edit button is in the first column of the row, you can retrieve that button using the line shown in bold above. You then get the current id using the data() function to retrieve the data-id attribute’s value.

Update a Person

You now need to modify the updatePersonInTable() function to find the row in the table that contains this unique ID. You call this function using updatePersonInTable(currentId);. This function uses that id to locate the button that contains the data- attribute within your table. An example of the jQuery selector that might be built would be $(“#peopleTable button[data-id=’2’]). This selector returns a row in the table that has the data for the person you wish to edit. One you locate the row, replace that row in the table with the contents from what the user entered in the input fields on this form. The code for the updatePersonInTable() function is shown below.

Adding a New Row

Each time you add a new row to the table, use the ‘nextId’ variable to build the row of data. So you rewrite your addPersonToTable() function as shown below. Notice how you pass in the nextId variable to the buildPersonTableRow() function. After this new person has been created, increment the ‘nextId’ variable so the next person you add gets the next unique id.

Summary

While the code in this blog post is not needed if you are just working 100% client-side, it will come in handy once you start working with data from the server. Using the data- attributes to store the primary keys is a great way to keep track of your unique ids.