Применить событие 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. В примере таблицы тип A имеет двух непосредственных дочерних элементов, а у первого дочернего элемента также есть дочерний элемент.

Когда пользователь нажимает на typeA, появляются две строки typeB, а когда у typeB есть дочерние элементы, он также расширяется, показывая строку typeC. У меня есть обработчик событий, который делает это по клику.

Мне нужно применить подробное раскрытие (typeA к typeC) для элемента с определенным значением. Мне нужно вызвать событие раскрытия для родителя и всех потомков этого родителя, когда значение ячейки в типе А равно значению, полученному из строки запроса. У меня есть код, который уже делает это. Тем не менее, я чувствую, что это немного взломать. Мне было интересно, есть ли у кого-нибудь предложения? Вот что у меня есть.

 $(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, это строка класса typeA, которая соответствует ExpandValue. Затем увеличьте startIndex на единицу, чтобы указать на следующую строку. Цикл while проверяет класс каждой строки. Инициируйте событие расширения в каждой строке, пока не будет достигнута следующая строка типа. Это работает и расширяет каждый ряд правильно. Но опять же, я новичок в 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's .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

Кроме того, вы продолжаете переносить переменную tableRows в jQuery, что не является необходимым, поскольку это уже объект 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 запускаетфункция expandRows() затем передаст нулевой индекс, который будет нацелен на верхнюю строку (которую вы исключаете из своего селектора в начале).

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