Question

我有一个非常基本的代码：

$(document).on("keydown", function(e){
    if(e.keyCode == 40){ //down arrow
        $('tbody').first('tr').focus();

    }else if(e.keyCode == 38){ //up arrow

    }
});

您可以看到我检查是否按下了向上或向下键。如果按下向下箭头，Jquery应该关注tr中的第一个tbody。这意味着应该添加这种风格：

tr:focus{
  background-color: #f5f5f5;
}

但不知怎的，它不起作用！你能修改它并给我一个解决方案吗？感谢

小提琴：http://jsfiddle.net/hye78/2/

Answer 1

我相信你想做这样的事情：

Living example

该行没有focus状态，但您可以将其替换为类。我为它选择了班级active。

此外，背景应该应用于td元素，而不是tr。

tr.active td {
    background-color: #f5f5f5;
}

这是我使用的jQuery：

$(document).on("keydown", function (e) {
    var activeRow;
    if (e.keyCode == 40) { //down arrow
        if (!$('tbody').find('tr.active').length) {
            activeRow = $('tbody').find('tr').first();
        } else {
            activeRow = $('tbody').find('tr.active').next();
        }

    }else if (e.keyCode == 38) { //up arrow
         activeRow = $('tbody').find('tr.active').prev();
    }

    activeRow.addClass('active').siblings().removeClass('active');

});

Answer 2

您可以将tabindex="1"添加到tr并更改一下您的JS代码：

有无

 $('tbody tr:first').focus();

而不是

  $('tbody').first('tr').focus();

Fiddle

Answer 3

<强> LIVE DEMO

tabindex适用于我们，而在jQ中，您可以使用计数器将TR聚焦在循环中

  <table>
    <tbody>
      <tr tabindex="0"><td>TD1</td></tr>
      <tr tabindex="0"><td>TD2</td></tr>
      <tr tabindex="0"><td>TD3</td></tr>
    </tbody>
  </table>

JQ：

var $tr = $('tr');     //cache your selectors!
var c = 0;             //current/counter
var n = $tr.length;    //num of TR elements

// here instead of /document/ use rather a static element ID selector
$(document).on("keydown", function(e){

  var k = e.which;
  if(k==40){           // DOWN
    ++c;
  }else if(k===38){    // UP
    --c;
  }
  c %= n;              // Loop counter
  $tr.eq(c).focus();   // Focus on current using .eq() method

});

Answer 4

默认情况下，

<tr>无法接受焦点。除非您为元素设置了tabindex，否则焦点仅限于表单元素和链接。

http://jsfiddle.net/hye78/7/

Answer 5

这是解决方案：click here for live example

jquery

 $(document).on("keydown", function(e){
    if(e.keyCode == 40){ //down arrow
        $('tbody tr:nth-child(1)').addClass('highlight');
    }
});

CSS

.highlight{
  background-color: #f5f5f5;
    }

焦点不适合我

5 个答案: