Question

我有10＆＃34; tr＆＃34;像这样的标签：

<tr class="jtable-data-row jtable-row-even" data-record-key="13">
<td class="jtable-selecting-column">
<input type="checkbox">
<label for="">
<span></span>
</label>
</td>
</tr>

<tr class="jtable-data-row" data-record-key="11">
<td class="jtable-selecting-column">
<input type="checkbox">
<label for="">
<span></span>
</label>
</td>
</tr>

如何获得＆＃34; data-record-key＆＃34;的价值？如果勾选了复选框？我应该使用哪个类或ID名称？

我必须说我无法更改HTML代码。

Answer 1

假设您正在响应复选框上的某个事件，事件处理程序中的this将引用与该事件相关的复选框。所以在事件处理程序中：

var key = $(this).closest('tr').attr('data-record-key');

this - 事件与
$(...) - 将其包装在jQuery实例中
.closest('tr') - 查找距其最近的祖先tr
.attr('data-record-key') - 从中获取data-record-key属性

或者，您可以使用.closest('tr')代替.closest('[data-record-key]')来查找具有该属性的最近祖先。

或者，如果您正在尝试找到已选中的每个复选框的密钥，您可以像这样查询：

var checkedRecordKeys = $("[data-record-key] input[type=checkbox]").map(function() {
    return this.checked
               ? $(this).closest("[data-record-key]").attr("data-record-key")
               : undefined;
}).get();

checkedRecordKeys将是包含已选中复选框的行的所有data-record-key值的数组。

Answer 2

只需添加替代方法 - 您还可以使用data()获取数据属性值，如下所示：

$("input").on("click", function () {
 var dVal = $(this).closest("tr").data("recordKey");
 alert(dVal);
});

代表<tr class="jtable-data-row jtable-row-even" data-record-key="13">

小提琴：Getting data value using data()

jQuery数据的参考：api.jquery.com/data/

为了访问数据值，数据属性的名称正在丢失＆＃34;数据 - ＆＃34;和连字符（如果有的话）;连字符后的第一个字符获取camelCased，因此data-record-key被recordKey访问。

如何在javascript中使用类名获取html标记的属性值

2 个答案: