javascript - 在 keydown 上使用 jquery 跳过 tr 选择

Question

所以，我现在的情况是:

https://jsfiddle.net/rucjr5cm/

$(function() {
  var row = $('.DataList tbody tr.highlight');
  var index = row.index();
  console.log('current row: ' + index);

  function highlight(tableIndex) {
    $('.DataList tbody tr').removeClass('highlight');
    $('.DataList tbody tr:eq(' + tableIndex + ')').addClass('highlight');
  }

  $(document).keydown(function(e) {
    var currentRow = $('.DataList tbody tr.highlight');

    switch (e.which) {
      case 38:
        var prevRow = currentRow.closest('.DataList tbody tr:not(.Header, .SubHeader, .Total)').prev('tr');
        highlight(prevRow.index());
        break;
      case 40:
        var nextRow = currentRow.closest('.DataList tbody tr:not(.Header, .SubHeader, .Total)').next('tr');
        highlight(nextRow.index());
        break;
    }
  });
});

.highlight {
  background-color: yellow !important;
}
.Header,
.SubHeader,
.Total {
  background-color: grey;
}

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<table id="data" class="DataList" border="1" cellspacing="1" cellpadding="1">
  <tbody>
    <tr>
      <th>#</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
      <th>header5</th>
    </tr>
    <tr>
      <td>1</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="Header">
      <td>2</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="SubHeader">
      <td>3</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="highlight">
      <td>4</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>5</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="Total">
      <td>6</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

我希望突出显示的行跳过灰色行(由类定义且无法修改)。如果到达最后一个未变灰的，转到第一个(同样，未变灰)也很好。

我也尝试过使用 jQuery 中最接近的 + next 和 prev 方法，但也一无所获。

我从来没有使用过 closest 和 next/prev 方法，我肯定做错了什么，有人可以提供任何帮助吗？

非常感谢!

Answer 1

我会使用 nextAll和 prevAll功能:

var rows = $('.DataList tbody tr');   // cache this for better performance

function highlight(row) {
  // changed to use the cached object
  rows.removeClass('highlight');
  
  // instead of using the index, you can just pass the object in
  row.addClass('highlight');
}

$(document).keydown(function(e) {
  
  var currentRow = rows.filter('.highlight');   // use filter to get the current highlight

  switch (e.which) {
    case 38:
      e.preventDefault(); // this will stop the page moving when the arrow is pressed

      var prevRows = currentRow.prevAll('tr').not('.Header,.SubHeader,.Total'),  // use prevAll to get all preceding rows and then filter out ones with the classes,
          prevRow;
      
      if (prevRows.length) {
        // test if there is a matching row and then highlight it
        prevRow = prevRows.eq(0);
      } else {
        // no matching so start from the end 
        prevRow = currentRow.nextAll('tr').not('.Header,.SubHeader,.Total').last(); 
      }
      
      highlight(prevRow); // no need to figure out the index.  but if you want you would do rows.index(prevRow); - gets the index with regards to all rows
      break;

    case 40:
      e.preventDefault(); // this will stop the page moving when the arrow is pressed
      var nextRows = currentRow.nextAll('tr').not('.Header,.SubHeader,.Total'),  // same as above but next
          nextRow; 
      
      if (nextRows.length) {
        nextRow = nextRows.eq(0);
      } else {
        nextRow = currentRow.prevAll('tr').not('.Header,.SubHeader,.Total').last();  
        // no matching so start from the beginning 
      }
      
      highlight(nextRow);
      break;
  }
});

.highlight {
  background-color: yellow !important;
}

.Header,
.SubHeader,
.Total {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data" class="DataList" border="1" cellspacing="1" cellpadding="1">
  <thead>               <!-- put header into a thead so it's not included in highlighting -->
    <tr>
      <th>#</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
      <th>header5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="Header">
      <td>2</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="SubHeader">
      <td>3</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="highlight">
      <td>4</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>5</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="Total">
      <td>6</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

在您的原始答案中使用 closest - 它遍历祖先( parent )而不是 sibling