在表格上保存隐藏数据的正确方法是什么？答案

【问题标题】：What is the correct way to save hidden data on a table?在表格上保存隐藏数据的正确方法是什么？
【发布时间】：2010-09-21 13:15:28
【问题描述】：

我使用jTemplates 插件在我的表上加载数据。因为有些属性我没有显示，但我希望以后可以使用，所以我将它们保存在隐藏字段中，然后通过它们的 CSS 类名和 jQuery 的 siblings 方法获取它们。

这是执行此类操作的正确方法，还是会被视为糟糕代码？

<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>

我们很乐意接受您的建议。 :)

【问题讨论】：

标签： javascript jquery html jtemplate

【解决方案1】：

你有什么工作，虽然你也可以像这样使用data attributes：

    {#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}

然后获取一个属性，例如点击编辑按钮时：

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

注意对编辑按钮的更改...您应该在此处使用类而不是 ID，因为它是重复的。

附带说明，由于主分支中有recent change，在 jQuery 1.5 中，您将能够使用.data("tuser") 而不是.attr("data-tuser")。

【讨论】：

在浏览器（IE 7）可能不支持的情况下，使用 data 会不会出现兼容性问题？你知道这种方法是否会更高效吗？
@Rafael - 确保创建更少的元素会更便宜），并且 IE7 没有问题......它在 HTML4 中没有任何问题，实际上在 HTML5 规范中.

【解决方案2】：

恕我直言，当您从服务器生成数据时，这是一种完全可以接受的存储数据的方式。另一种选择是在表格行上生成data- 属性。两者都是存储数据的有效方法，后者可能稍好一些。

【讨论】：

【解决方案3】：

在我看来，如果它有效，那么像你描述的那样微不足道的功能就可以了。至于将您的值保存在隐藏字段中 - 这可以更优化地完成。您可以尝试将值保存到变量中。然后检索它们会更简单，您不必遍历 DOM 来检索它们。

【讨论】：