将变量附加到HTML元素？

Question

我发现很多情况下我想将变量附加到div或其他HTML元素。例如，我有一个div，我用它作为一个对话框窗口来编辑表格中的一行 - 如下所示：

    <div class='dialog' id='editTableLineDialog'/>

当此对话框打开时，我需要在我正在编辑的表中记录该行的ID。在过去，我创建了名为lineCurrentlyEditting（Yuck！）的全局变量，或者我将id嵌入到实际的表id中，如下所示：

    <div class='dialog' id='editTableLineDialog_43'/>

两种解决方案都不是很优雅。我希望能够将变量添加到div中，例如：

    var dialog = document.getElementById('editTableLineDialog');
    dialog.tableLineId = 43;

或

    $('#editTableLineDialog').tableLineId = 43;

或

    <div meta='{tableLineId=43}' class='dialog' id='editTableLineDialog'/>

无论如何都要做这样的事情？处理这种情况的最佳方法是什么？ JQuery有解决方案吗？

Answer 1

您可以使用数据属性。

<div data-tableLineId='43' class='dialog' id='editTableLineDialog'/>

jQuery有一个数据函数：（http://api.jquery.com/jQuery.data/）

$.data('#editTableLineDialog', 'tableLineId','43');

Answer 2

通常的做法是将所谓的值存储在所谓的“隐藏字段”中。假设对话框与表格在同一页面中，你很可能只有这样的东西：

<input type="hidden" id="tableRowEdited" value="43">

这不会呈现给用户，但您可以通过jQuery引用它：

$("#tableRowEdited").val()