如何爲所有下一個可見表格行執行條件檢查？

我有一些JavaScript，當用戶在文本輸入框內單擊並按下向下或向上箭頭鍵時觸發。此功能的目的是搜索表格值，然後按下下方向鍵和上方向鍵選擇一個值。我的工作很好，但唯一的問題是，當用戶到達最後一個可見的表格行並再次按下時，突出顯示的表格行消失。我想要發生的是，當用戶到達最後一個表格行並再次按下時，我希望突出顯示第一個可見的表格行，以便用戶可以再次開始鍵入可見的表格行。這裏是relavent代碼：如何爲所有下一個可見表格行執行條件檢查？

// JavaScript的

$(function(){ 
    $("#main").on("keyup", "#search", function(e){ 
    e.preventDefault(); 
    searchTable($(this).val()); 
    }); 

    $("#main").on("keydown", "#search", hoverDown); 
}); 

function hoverDown(e) { 
    var $tbl = $('#tblDataBody'); 
    var $cur = $('.active', $tbl).removeClass('active').first(); 


if (e.keyCode === 40) { //down 
    if ($cur.length) { 

     // here is where we need to check to see if we are on the last one 
     // and if we are we need to remove class active and add class active 
     // to the first visible table row 
     $cur.nextAll(':visible:first').addClass('active'); 

     var $current = $('.active', $tbl).nextAll(':visible'); 
      console.log($current.length); 

    } else { 
     $("#tblDataBody tr:visible:first").addClass('active'); 
     console.log("down else"); 
    } 
} else if (e.keyCode == 38) { //up 
     e.preventDefault(); 
    if ($cur.length) { 
     $cur.prevAll(':visible:first').addClass('active'); 
     console.log($cur); 
    } else { 
     $tbl.children().last().addClass('active'); 
    } 
} else if (e.keyCode == 13) { 
    if ($cur.length) { 
     // manually invoke pjax after enter has been pressed 
     var $url = $cur.find("a").attr("href"); 
     $.pjax({url: $url, container: '#main'}); 
    } 
} 
} 
function searchTable(inputVal) 
{ 

    var table = $('#tblData'); 
    table.find('tr').each(function(index, row) 
    { 
     var allCells = $(row).find('td'); 
     if(allCells.length > 0) 
     { 
      var found = false; 
      allCells.each(function(index, td) 
      { 
       var regExp = new RegExp(inputVal, 'i'); 
       if(regExp.test($(td).text())) 
       { 
        found = true; 
        return false; 
       } 
      }); 
      if(found == true)$(row).show();else $(row).hide(); 
     } 

    }); 

}

// HTML

<div id="main"> 
<input type="text" class="table-search" id="search" autocomplete="off" placeholder="Search Clients…"> 
<table class="table" id="tblData"> 
<thead><tr><th>Name</th> <th>Title</th></tr></thead> 
<tbody id="tblDataBody"> 
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr><tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table> 
</div>

// CSS

.active { 
    background-color: #f9f9f9; 
}

如果你想在行動中看到這個代碼想看看我在說什麼，看看這個jsfiddle：http://jsfiddle.net/scottm28/VDCyd/1/

單擊文本輸入並點擊向下箭頭鍵，直至完成底部。您會注意到，如果再次按下向下箭頭鍵，將不會有突出顯示的表格行 - 這正是我試圖避免的。我希望它立即跳回頂部VISIBLE表格行。

來源

2013-02-20 Scott

在http://jsfiddle.net/VDCyd/3/

您的相關代碼更改爲

if (e.keyCode === 40) { //down 
    e.preventDefault();  

    var next = $cur.nextAll(':visible:first'); 
    if (next.length === 0){ 
     next = $('tr:visible:first', $tbl); 
    } 
    next.addClass('active'); 

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

    var next = $cur.prevAll(':visible:first'); 
    if (next.length === 0){ 
     next = $('tr:visible:last', $tbl); 
    } 
    next.addClass('active'); 

}

演示

來源

2013-02-20 23:38:59

如何爲所有下一個可見表格行執行條件檢查？

回答

相關問題