从表格单元格中获取变量答案

【问题标题】：Get variable from table cell从表格单元格中获取变量
【发布时间】：2015-12-04 16:50:03
【问题描述】：

我在表格中显示合同和服务的列表，它们都有一个 ID。

当您单击合同或服务的单元格时，它应该会进入详细信息页面。我将 ContractId/ServiceID 保存在 id 属性中，如下所示：

<td class="TableCell" id="@ID">
    Sometext
</td>

我在这里检索它：

var id = this.id;    
// the following is an MVC thing, don't worry about it
var url = '@Url.Action("Details", "services", new { id = "__id__" })'; 
window.location.href = url.replace('__id__', id);

这一切都很好，但现在我想在表格单元格中保存另一个变量，如下所示：

<td class="TableCell" id="@ID" value="@Variable2">
    SomeText
</td>

我知道这行不通，但是最好的方法是什么？使用id 属性传递变量是个好主意吗？

【问题讨论】：

标签： javascript html model-view-controller

【解决方案1】：

首先：

使用id 属性传递变量是个好主意吗？

如果您传递的 ID 可以被认为是该元素的 ID，那么它肯定没有问题。如果它不是真正的那个元素的 ID，而是其他东西的 ID，那么 从概念上来说这不是一个好主意。

在更一般的意义上，在 HTML 属性中存储额外数据的常用方法是使用data- 属性：

<td class="TableCell" data-id="@ID" data-var2="@Variable2">

如果您使用的是a modern browser，则可以使用dataset 属性访问它们：

var id = this.dataset.id;
var val2 = this.dataset.var2;

否则，您可以使用带有完整属性名称的getAttribute 方法：

var id = this.getAttribute('data-id');
var val2 = this.getAttribute('data-var2');

【讨论】：