如何为所有下一个可见表格行执行条件检查？

我有一些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

如何为所有下一个可见表格行执行条件检查？

回答

相关问题