在keydown上使用jquery跳过tr选择

Question

所以，我现在有这种情况：

https://jsfiddle.net/rucjr5cm/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望突出显示的行跳过灰色的（由类定义，不能修改）。如果到达最后一个不是灰色的那个，那么去第一个（再次，不是灰色）也会很好。

我尝试过使用jQuery中最接近的+ next和prev方法，但也没有得到任何东西。

我从来没有使用过最近的和下一个/上一个方法，我当然做错了什么，有人可以提供任何帮助吗？

非常感谢！

Answer 1

我会使用nextAll和prevAll函数：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在原始答案中使用closest - 它遍历祖先（父母）而不是跨越兄弟姐妹

Answer 2

1. 改变高光的迷雾
2. 简单的pre＆amp;下一个选择器
3. 如果预先＆amp;未找到下一个tr，使用第一个/最后一个正常tr作为下一个高亮目标

var row = $('.DataList tbody tr.highlight');
				
			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');
        var normalRowSelector = 'tr:not(.Header,.SubHeader,.Total,.highlight)';
        var nextHltIndex = -1;
				switch(e.which) {
					case 38:
						nextHltIndex = currentRow.prev(normalRowSelector).index();
            if(nextHltIndex == -1){
            	nextHltIndex = $(normalRowSelector).filter(":last").index();
            }
					break;
					case 40:
						nextHltIndex = currentRow.next(normalRowSelector).index();
            if(nextHltIndex == -1){
            	nextHltIndex = $(normalRowSelector).filter(":first").index();
            }
					break;
				}
        highlight(nextHltIndex);
			 });

.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">
	<tbody>
        <tr class="Header">
            <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>

jsFiddle

Answer 3

我更新了jsfiddle。你能不能看看更新的那个

jsfiddle

我希望你想要这个功能吗？

Answer 4

jsfiddle

我已经更新了你提供的jsfiddle，新的方法似乎工作正常。

使用not()阻止将班级highlight添加到tr attribute

的任何class

还有一件事是你的第一个tr包含所有th应该包含在thead之前的tbody部分，但我没有为你更改它请这是你自己

Answer 5

Id是强选择器而不是类。

试试这个

$('#data tr.highlight');