重點不是爲我工作

我有一個非常基本的代碼：重點不是爲我工作

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

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

    } 
});

你可以看到，我檢查是否向上或向下鍵被按下。如果按下向下箭頭，則應該由Jquery關注tbody中的第一個tr。這意味着這種風格應該被添加：

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

但不知何故它不起作用！你能修改它並給我一個解決方案嗎？由於

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

來源

2014-02-20 John Smith

'tr'可是沒有重點，只有文字輸入和那麼第四。有關詳細信息，請參閱此帖[如何使用jQuery或JavaScript集中或標記？]（http://stackoverflow.com/questions/1932152/how-to-focus-a-tr-or-td-tag-使用-jquery或javascript） – user1477388

我相信你想要做這樣的事情：

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

});

來源

2014-02-20 17:19:18 Alvaro

男人這真棒！但我還有一件小事！假設我在每一行都有一個屬性'data-link'，用於例如'我怎樣才能通知alert（$（this）.attr（'data-link'）） '如果用戶點擊回車鍵？感謝您的幫助！ –

@JohnSmith這是一個完全不同的問題，請爲它打開一個新的問題，答案應該儘可能的清楚，如果這回答您提出的問題，請接受它 – Alvaro

你可以添加tabindex="1"您tr和改變你的JS代碼位：

有

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

代替

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

Fiddle

來源

2014-02-20 17:19:19 putvande

<tr>不能接受默認的焦點。除非您已爲元素設置tabindex，否則焦點僅限於形成元素和鏈接。

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

來源

2014-02-20 17:20:27

這裏是解決方案：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; 
    }

來源

2014-02-20 17:23:28

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 

});

來源

2014-02-20 17:25:14

YaY！我不是唯一一個使用'$（document）.on'的人，但是等等，這是一個抱怨速度問題的人嗎？你知道使用'靜態父母':-P只是在你挑選！有一個愉快的一天Roko＆All StackO Peeps！ – SpYk3HH

@ SpYk3HH嗨兄弟，是的，雖然你完全正確地聽取事件的缺點，一直到文件，如果你看看OP的演示表，那麼這個表就是'body'的第一個孩子。你是對的，我會編輯我的答案到第在外面。真的很感激你的評論。 –

我很欣賞你能夠反覆發表評論，即使有些玩世不恭，也不像其他人最近那麼多（完全混亂，「我的路或高速公路」）。這真是令人耳目一新。作爲一個友善的地方，我開始失去希望。即使我開始變成一個評論混蛋！信仰在恢復！ – SpYk3HH

重點不是爲我工作

回答

相關問題