Say I have a table of items and I want to add to every row a button to delete that item. Items come from a database, so they have an unique ID. In the jQuery function I have to retrieve the ID of said item so that I can open a confirm box and eventually redirect the browser to the delete page (nevermind security checks, it's for internal use).
Where in the markup is it better to place the ID?
I think it's better to place an id as a part of row's id:
....
<tr id="item_3">...<td>delete tag</td></tr>
<tr id="item_4">...<td>delete tag</td></tr>
<tr id="item_5">...<td>delete tag</td></tr>
....
And then in jQuery get an id using simple regex.
Update:
Or, just put it into rel attribute of a delete button/anchor.
Update 2:
Since regex may slow down jQuery performance in this case, try to put id's as rel attribute of each row.
Give each item a unique ID. The '#' selector works fastest, because it maps to a native javascript method.
It would make sense to put it into the <tr> element, because that is the item that holds all the data/markup related to this item.
If you know in advance that the delete button is the only element which will interact with the unique ID, it would be slightly faster and easier to just add it to the button itself.
You should put it on a form surrounding the delete button:
<tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>
I realise that this might seem a little heavyweight, but this works without javascript, which is always best-practice.
There are a couple of ways you could achieve this.
Firstly, try the jQuery meta plugin. This allows you to embed JSON data in the class attribute of an element. It validates and doesn't affect the classes applied to the element. Your tr could look like this:
<tr class="some-class {uid:'12345', asMuchDataAsYouLike}">
Alternatively (if you don't mind using HTML5), use a data attribute (here, here):
<tr data-uid="12345">
Note: This will validate as HTML5 if you use the correct DocType (<!DOCTYPE html>).
Edit (example usage):
HTML:
<tr data-uid="12345">
<td>Some Data</td>
<td><button class="delete">Delete</button></td>
</tr>
Javascript:
$('button.delete').click(function(){
// obviously you'd do something different with the data ;)
alert($(this).closest('tr').attr('data-uid'));
});
Not tested, but assuming you are using jQuery 1.3+
$(this).closest('tr').attr('id');
Should give you the id of the row that you have clicked on (noting that you'll have to give the row an id first when you build the table.
Is it just me, or is it that simple?
<tr id="cell-8958"><td>..<td><td class="delete">Delete me</td></tr>
...
$('.delete').click(function(){
thisid = $(this).parent().attr('id');
dostuff();
});
Edit: Or, if you want to begin with numbers:
.id { display: none; }
...
<tr><td class="id">cell-8958</td><td>..<td><td class="delete">Delete me</td></tr>
...
$('.delete').click(function(){
thisid = $(this).parent().find('td.id').text();
dostuff();
});
P.S.: CSS might be different, haven't tested in browsers.
A.