Question

I write a web site with jquery and lot of ajax request to get data for table and ask data modifications with PHP/MySql on server side.

Currently, I use id attribute to store the id of the field of the table (which is an autoincrement int value).
And it works fine.

BUT I have recently learned that id should be unique (and start with a letter…).
AND I have different tables that could have the same id value (for different sql table)
Then I am not html (nor xhtml) compliant…

How could I correct my code ?

• By using .data() function of jQuery ?
• An hidden html element with the id as value (<span class="id">3</span>) ?
• Other solution ?

---

Additional informations:
I have wrote a widget to manage my tables.
To add a new row, I do:

    row = $('<div class="row" id="'+item.id+'"/>');
    [...] // I add fields to my row
    row.appendTo(tableData);// tableData is the html element where rows are

When a field element is changed, I trigger an event to the table that will ask the modification to the server with the right id:

$(e.target).closest(".row").attr("id")

Answer 1

If you are able to use jQuery 1.4.3 or greater look at using the html 5 data-* attributes. jQuery 1.4.3 will automatically use those data- attributes and place them in the .data() collection on the element.

Example:

<table>
  <tr data-rowId="1">

  </tr>
</table>

$("tr:first").data("rowId") would print 1

This method would also allow you to store json objects as well.

<table>
  <tr data-row='{"Id" : 1, "Name": "Smith"}'>

  </tr>
</table>

And than in your data()
var row = $("tr:first").data("row")
You can reference row.Id and row.Name