Question

I have a web page and using php Im quering a database and displaying the results in a table like so:

<table id="tablelist">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info here1</td>
<td>Info here1</td>
<td class="actions">Action1 - Action2 - Action3</td>
</tr>
<tr>
<td>Info here2</td>
<td>Info here2</td>
<td class="actions">Action1 - Action2 - Action3</td>
</tr>
</tbody>
</table>

Now each row has unique information specific to that row that is from the database. For example the primary id, a date and category. When someone clicks an action for any of the rows I need to obtain those 2 pieces of information specific to the row they clicked. Currently I tried doing this:

<div class="row_data">{info2 in json format}</div>    
<tr>
    <td>Info here1</td>
    <td>Info here1</td>
    <td class="actions">Action1 - Action2 - Action3</td>
    </tr>
<div class="row_data">{info2 in json format}</div>    
<tr>
    <td>Info here2</td>
    <td>Info here2</td>
    <td class="actions">Action1 - Action2 - Action3</td>
    </tr>

So when someone clicked on an action link it would get the previous value of row_data, which is in json format. I would use jquery to parse the json value and use the information found within the rest of the jquery code. But I was told this is invalid html and not recommended. What would be a recommended/optimal way of storying dynamic data per row to use when an action is clicked so I can reference it in my jquery code?

Answer 1

The way to do it is use HTML 5’s data attributes:

<tr id="foo" data-something="put whatever you want in here">
    <!-- content -->
</tr>

You can then access the information you stored there with

$("#foo").data("something")

The value of data-something can be anything you like (as long as it’s filtered through htmlspecialchars if you are echoing it straight from PHP), and you can use multiple data attributes if that’s more convenient (usually it is).

There’s also a post by John Resig on the subject.