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

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

 <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中单元格的值等于从查询字符串接收到的值时，我需要在父级和该父级的所有子级上触发expand事件。我有一些代码已经完成了。然而，我觉得这是一个有点黑客。我想知道是否有人有一些建议？这是我到目前为止所拥有的

 $(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++;
           }
      }
 });

$（函数（）{
var tableRows=$（“#详细表”）.find（“tr:gt（0）”；
$（表行）。每个（函数（i，val）{
//ExpandValue是我的C#页面中的一个值。
if（$.trim（val.cells[0].innerText）=''）{
（i）；
}
}
函数expandRows（startIndex）{
//展开第一行，typeA类
//与值匹配的行
$（tableRows[startIndex]）。触发器（'expand'）；
startIndex+=1；
while（$（tableRows[startIndex]）.attr（“类”）！=“typeA”）{
$（tableRows[startIndex]）。触发器（'expand'）；
startIndex++；
}
}
});

---

这将查找表中的所有行。然后在表行数组中循环。条件检查每行中第一个单元格的innerText。如果单元格的innerText与ExpandValue匹配，则已找到目标行。将此行的索引发送到expandRows函数。在expandRows函数中，从开始处展开行索引，这是与ExpandValue匹配的typeA类行。然后将startIndex增加1以指向下一行。while循环检查每一行的类。触发每一行上的expand事件，直到命中下一个typeA行。这可以正常工作并正确扩展每一行。但是，我对jquery还是新手，我觉得可能有有更好的方法来实现这一点。有什么想法吗？

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

//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);
    }
}

---

我不确定这是否已经实现了您想要的功能，但是在

expandRows

函数中，您可能应该在执行任何操作之前将

startIndex

增加1，因为如果通过

for

循环的第一次迭代触发

expandRows（）

函数，然后它将传递一个零索引，该索引将指向最上面的一行（您在开始时将其从选择器中排除）。

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

//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);
    }
}

我不确定这是否已经实现了您想要的功能，但是在

expandRows

函数中，您可能应该在执行任何操作之前将

startIndex

增加1，因为如果通过

for

循环的第一次迭代触发

expandRows（）

函数，然后它将传递一个零的索引，该索引将指向顶部的行（您在开始时将其从选择器中排除）。

$（函数（）{
var$list=$（'#详细表tr.typeA:gt（0）>td:eq（0）：包含（“”）；
for（变量i=0，len=$list.length；i

$（函数（）{
var$list=$（'#详细表tr.typeA:gt（0）>td:eq（0）：包含（“”）；
for（变量i=0，len=$list.length；i

这看起来很棒。感谢您的帮助和额外的阅读。但是，这无法正常工作。我认为这是由于$.trim（$tableRows.eq（I）.find（'td'）.eq（0.text（））造成的调试时，这始终是一个空字符串。这可能是浏览器对单元格文本的问题吗？我正在阅读。innerText和.text在某些浏览器上不同。如果有帮助，我正在Chrome中调试。谢谢你的帮助！没关系，我知道了。检查值使用.find（'td'））。我的第一个单元格实际上是一个th。谢谢！这看起来很棒。谢谢你的帮助和额外的阅读。但是，这工作不正常。我认为这是由于$.trim（$tableRows.eq（I）.find（'td'）.eq（0.text（））造成的调试时，这始终是一个空字符串。这可能是浏览器对单元格文本的问题吗？我正在阅读。innerText和.text在某些浏览器上不同。如果有帮助，我正在Chrome中调试。谢谢你的帮助！没关系，我知道了。检查值时使用了.find（'td'）。我的第一个单元格实际上是一个th。谢谢！

$(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');
     }
  }
});