将 jquery 事件应用于表中的特定范围或行

Question

我在中继器中有一张桌子。数据被输入到表中，并且根据加载的数据类型为每一行分配一个类。例如：

 <table id="detail-table">
      <tr class="typeA">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeC">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeA">
           <td>Value</td>
      </tr>
 </table>

表格是折叠的表格。 typeA 是标头，typeB 是 typeA 的子代，typeC 是 typeB 的子代。在表示例中，typeA 有两个直接的孩子，第一个孩子也有一个孩子。

当用户点击 typeA 时，会出现两个 typeB 行，当 typeB 有子项时，它也会展开以显示 typeC 行。我有一个事件处理程序可以在点击时执行此操作。

我需要为具有特定值的项目应用完整的细节扩展（typeA 到 typeC）。当 typeA 中单元格的值等于从查询字符串接收到的值时，我需要在父级和该父级的所有子级上触发展开事件。我已经有一些代码可以做到这一点。但是，我觉得这有点像黑客。我想知道是否有人有一些建议？这是我目前所拥有的。

 $(function() {
      var tableRows = $('#detail-table').find("tr:gt(0)");
      $(tableRows).each(function(i, val) {
           //ExpandValue is a value in my C# page.
           if ($.trim(val.cells[0].innerText) == '<%= ExpandValue %>'){
                expandRows(i);
           }
      }

      function expandRows(startIndex) {
           // Expand the first row, the typeA class
           // row that matches the value
           $(tableRows[startIndex]).trigger('expand');
           startIndex += 1;
           while($(tableRows[startIndex]).attr("class") != "typeA"){
                $(tableRows[startIndex]).trigger('expand');
                startIndex++;
           }
      }
 });

这会找到表的所有行。然后循环遍历表行数组。该条件检查每行中第一个单元格的 innerText。如果单元格的 innerText 与 ExpandValue 匹配，则已找到目标行。将此行的索引发送到 expandRows 函数。在expandRows 函数中，展开startIndex 处的行，这是与ExpandValue 匹配的typeA 类行。然后将 startIndex 加一以指向下一行。 while 循环检查每一行的类。在每一行上触发展开事件，直到命中下一个 typeA 行。这有效并正确扩展了每一行。但同样，我是 jquery 的新手，我觉得可能有一些方法可以更好地完成此任务。有什么想法吗？

Answer 1

您可以在代码顶部加速选择器和循环：

//instead of using a pseudo-selector, we can use the `slice()` function to get all but the first element returned
var $tableRows = $('#detail-table').find("tr").slice(1);

//this `for` loop will perform a lot faster than the `.each()` loop
for (var i = 0, len = $tableRows.length; i < len; i++) {
    if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
        expandRows(i);
    }
}

这里演示了一个正确格式化的for循环比使用jQuery的.each()快多少：http://jsperf.com/jquery-each-vs-for-loops/2

这里有一些文档供你参考：

• .slice(): http://api.jquery.com/slice
• .eq(): http://api.jquery.com/eq
• .text(): http://api.jquery.com/text

另外，你一直在 jQuery 中包装你的 tableRows 变量，这不是必需的，因为它从一开始就已经是一个 jQuery 对象。

 $(function() {
      var $tableRows = $('#detail-table').find("tr").slice(1);
      for (var i = 0, len = $tableRows.length; i < len; i++) {
          if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
              expandRows(i);
          }
      }

      function expandRows(startIndex) {
           // Expand the first row, the typeA class
           // row that matches the value
           $tableRows.eq(startIndex).trigger('expand');
           startIndex++;
           while($tableRows.eq(startIndex).attr("class") != "typeA"){
                $tableRows.eq(startIndex).trigger('expand');
                startIndex++;
           }
      }
 });

我不确定这是否已经在执行您想要的操作，但是在您的 expandRows 函数上，您可能应该在执行任何操作之前将 startIndex 递增一个，因为如果通过 for 循环的第一次迭代会触发 @ 987654336@ 函数然后它将传递一个零索引，该索引将针对顶行（您在开始时从选择器中排除）。

Answer 2

$(function(){
  var $list = $('#detail-table tr.typeA:gt(0) > td:eq(0):contains("<%= ExpandValue %>")');
  for (var i = 0, len = $list.length; i < len; i++)
  {
     var $nextrows = $list[i].nextAll("tr");
     for (var x = 0, ilen = $nextrows.length; x < ilen; x++)
     {
        if ($nextrows[x].hasClass("typeA")) break;
        $nextrows[x].trigger('expand');
     }
  }
});