javascript - 在 ASP.NET 中添加自定义属性。在 JQuery 中访问它

Question

我有一个在 ASP.NET C# 代码后面创建的表。该表有多个级别的分组，当我为最外层分组创建行时，我添加了一个自定义属性，如下所示:

foreach (Table2Row row in Table2Data)
{
    // skipping a bunch of irrelevent stuff
    ...
    tr_group.Attributes.Add("RowsToToggle", String.Format(".InnerRowGroupId_{0}", row.GroupHeaderId));
    ...
}

该属性是我想要切换的内部级别行的 CSS 类名称。当用户点击外层行时，我想为所有匹配自定义属性的内层行调用 JQuery Toggle 函数。

为实现该效果，我在 aspx 文件中使用以下脚本将 onclick 事件附加到标题行:

var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
    var table = document.getElementById(tableId);
    var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
    for (i = 0; i < groupRows.length; i++) {
        table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
    }
});

function ToggleOnRowClick(row) {
    var r = $('#' + row.id);
    var innerRows = r.attr('RowsToToggle');
    $(innerRows ).toggle();
}

因此，单击标题行上的任意位置应调用函数 ToggleOnRowClick，然后该函数应通过自定义属性 RowsToToggle 切换其下方的行集。

当我在 ToggleOnRow 函数中设置 (FireBug) 断点时，变量 r 似乎指向正确的对象。但是，innerRows 未设置，而是保持为空。那么我是在 ASP.NET 中错误地设置了自定义属性，还是在 JQuery 中错误地读取了自定义属性？

Answer 1

您没有发布生成内部级别行的代码，我假设您为它们安排了适当的类(class)。

您发布的 jquery 几乎没有问题。 这一行行不通:

   table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }

1. 您没有为表对象定义任何 groupRows 属性。
2. 我们不再关心表格行，我们关心 groupRows[i] 并希望将其传递给 ToggleOnRowClick 函数。
3. 下一个函数中的这一行也是错误的:var r = $('#' + row.id);

解决方案:将您的脚本更改为:

var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
    var table = document.getElementById(tableId);
    var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
    for (i = 0; i < groupRows.length; i++) {
        groupRows[i].onclick = function () { ToggleOnRowClick(this); }
    }
});

function ToggleOnRowClick(row) {
    //var r = $('#' + row.id);
    var innerRows = $(row).attr('RowsToToggle');
    $("." + innerRows).toggle();
}

我已经用虚拟数据测试了代码。所以，如果您有任何问题，请私信我。