What is the correct way to save hidden data on a table?

Question

I use the jTemplates plugin to load data on my tables. Because there are some properties I do not display yet I want available for later use, I save them in hidden fields and then grab them by their CSS's class name and jQuery's siblings method.

Is this a correct way of doing such operation, or would this be considered terrible code?

<script type="text/javascript">
$(function() {
    $("#edit").click(function(e) {
        e.preventDefault();
        var $this = $(this);

        var date = {
            Id:        $this.siblings(".tid").val(),
            StartDate: $this.siblings(".tdate1").val(),
            EndDate:   $this.siblings(".tdate2").val(),
            ClientId:  $this.siblings(".tclient").val(),
            UserId:    $this.siblings(".tuser").val()
        };

        processDate(date);
    });
});
</script>

<textarea id="template" class="ui-helper-hidden">
<table id="dates">
    <thead>
        <tr>
            <th>Id</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Client</th>
            <th></th>
       </tr>
    </thead>
    <tbody>
        {#foreach $T as record}
            <tr>
                <td>{ $T.record.Id }</td>
                <td>{ formatDate($T.record.StartDate) }</td>
                <td>{ formatDate($T.record.EndDate) }</td>
                <td>{ $T.record.Client.Name }</td>
                <td>
                    <button id="edit">Edit</button>
                    <input type="hidden" class="tid"        value='{ $T.record.Id }' />
                    <input type="hidden" class="tdate1"     value='{ $T.record.StartDate }' />
                    <input type="hidden" class="tdate2"     value='{ $T.record.EndDate }' />
                    <input type="hidden" class="tclient"    value='{ $T.record.Client.Id }' />
                    <input type="hidden" class="tuser"    value='{ $T.record.User.Id }' />
                </td>
            </tr>
        {#/for}
    </tbody>
</table>
</textarea>

Suggestions will be gladly accepted. :)

Answer 1

What you have works, though you could also use data attributes like this:

    {#foreach $T as record}
        <tr data-tid="{ $T.record.Id }" data-tdate1="{ $T.record.StartDate }" data-tdate2="{ $T.record.EndDate }" data-tclient="{ $T.record.Client.Id }" data-tuser="{ $T.record.User.Id }">
            <td>{ $T.record.Id }</td>
            <td>{ formatDate($T.record.StartDate) }</td>
            <td>{ formatDate($T.record.EndDate) }</td>
            <td>{ $T.record.Client.Name }</td>
            <td>
                <button class="edit">Edit</button>
            </td>
        </tr>
    {#/for}

Then to get an attribute for example when clicking the edit button:

$(".edit").click(function() {
  var user = $(this).closest("tr").attr("data-tuser");
  //do something...
});

Note the change to the edit button...you should use a class instead of an ID here, since it's repeated.

As a side note, because of a recent change in the main branch, in jQuery 1.5 you'll be able to do .data("tuser") instead of .attr("data-tuser").

Answer 2

IMHO, that is a perfectly acceptable way to store the data when you're generating it from the server. The other option would be to generate data- attributes on the table row. Both are valid methods of storing the data, the latter being maybe slightly better.

Answer 3

As I see it, if it works, for functionality as trivial as what your describing this is fine. As for saving your values in hidden fields - this could be done more optimally. You could try saving the values to variables instead. Then retrieving them would be simpler and you wouldn't have to traverse the DOM to retrieve them.