4

我有一个在 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 中错误地读取？

4

4 回答 4

2

您没有发布生成内部级别行的代码，我假设您为他们安排了适当的课程。

您发布的 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();
}

我已经用虚拟数据测试了代码。因此，如果您有任何问题，请 PM 我。

于 2013-09-22T02:38:29.290 回答
1

这条线是你的罪魁祸首：

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

到事件处理程序运行时，table.rows 可能仍然存在，但 i 将设置为 groupRows.length+1，这超出了数组的范围。处理程序将使用未定义的参数调用。

请记住，Javascript 是一种解释型语言！当处理程序运行时，表达式“table.rows[i]”将被插入。它将使用 i 的最后一个值（仍将设置为导致 for 循环结束的值 groupRows.length+1）。

只需使用

    table.groupRows[i].onclick = function () { ToggleOnRowClick(this) }
于 2013-09-24T21:48:21.083 回答
0

所以，首先你不应该使用自定义属性......它们是一种罪过！

请改用数据属性，这就是我将在代码中使用的，无论如何应该是一个简单的修复。

如果这不起作用，那么我会对查看实际输出的简化 HTML 片段非常感兴趣。

$(document).ready(function () {

    $('#MYTABLE').on('click', '.Table2GroupHeader', function() {
      var attr_if_you_insist_on_sinning = $(this).attr("RowsToToggle");
      var data_if_you_like_not_sinning = $(this).data("RowsToToggle");
      //if the row is like <tr data-RowsToToggle=".BLAH" or th etc

      //asumming you set the attribute to .BLAH then:
      var rows_to_toggle = $(data_if_you_like_not_sinning);
      rows_to_toggle.toggle();

      //assuming you set it to BLAH then:
      var rows_to_toggle = $("."+ data_if_you_like_not_sinning);
      rows_to_toggle.toggle();
    });

});
于 2013-09-24T21:43:52.167 回答
-1 
$(document).ready(function () {

    $('#<%= Table2MainTable.ClientID %> .Table2GroupHeader').each(function(){
        $(this).click(function(){
            $(this).toggle();
        });

    });

});
于 2013-09-17T13:37:42.660 回答