0

ユーザーがテキスト入力フィールド内をクリックして下矢印キーまたは上矢印キーを押したときに起動される JavaScript があります。この機能の目的は、テーブルの値を検索し、上下の矢印キーを押して値を選択できるようにすることです。私はうまく機能していますが、私が抱えている唯一の問題は、ユーザーが最後の表示されたテーブル行に到達してもう一度押すと、強調表示されたテーブル行が消えることです。私がしたいのは、ユーザーが最後のテーブル行に到達してもう一度押したときに、最初に表示されているテーブル行を強調表示して、ユーザーが表示されているテーブル行を再度キーダウンできるようにすることです。関連するコードは次のとおりです。

//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 テーブルの一番上の行にすぐに戻るようにしたいと思います。

4

1 に答える 1

2

関連するコードをに変更します

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/でのデモ

于 2013-02-20T23:38:59.340 に答える