Question

当用户在文本输入字段中单击并按向下或向上箭头键时，我会触发一些javascript。此功能的目的是搜索表值，然后按向下和向上箭头键选择一个。我有它工作正常，但我唯一的问题是，当用户到达最后一个可见的表行并再次按下时，突出显示的表行消失。我想要发生的是当用户到达最后一个表行并再次按下时，我希望突出显示第一个可见的表行，以便用户可以再次开始键入可见的表行。这是相关代码：

// java描述

$(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/

单击文本输入并按向下箭头键，直到您完全到达底部。您会注意到，如果再次按下向下箭头键，则没有突出显示的表行 - 这就是我要避免的。我希望它立即跳回到顶部可见的表格行。

Answer 1

将相关代码更改为

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

}

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

演示

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

1 个答案: