<input type="search">で検索する列を指定する方法が知りたい

Question

現在tableに4つのカラムがあり、そのうちの2つ目と3つ目の列のみに検索をする検索ボックスを作成したいと考えています。
方法が分からないので、ご教授をお願いします。

Answer 1

JQueryを使用したサンプルを作成しました。スペース区切りでOr検索になります。

列は、tdのindexで判断します。indexは、:eq(i)で取得できます。0から始まるので注意してください。

サンプル

$('.sh').on('change keyup',function(){
  var strs = $(this).val().split(' ');
  // findを間に入れることで、各`tr`の列に対して`each`を行える
  $('.tb tr').find('td:eq(1),td:eq(2)').each(function(){
    var self = this; // 次のfunctionで、thisが書き換わる為、一時保存
    var isHit = false;
    $.each(strs, function(){
      if(this.length<=0){
        return true; // continue
      }
      isHit = $(self).text().match(this);
      if(isHit){
        return false; // break
			}
		});
    if(isHit){
      $(self).addClass('hit');
    }
    else {
      $(self).removeClass('hit');
    }
	});
})

Answer 2

一般的にプログラムの世界では表の事はテーブルと言わずに、「グリッド（grid）」や「スプレッド(spread)」と言う言い方をします。
現状全くやり方の想像がつかないレベルであれば、最初からフィルタ機能のついたGRIDで作成する方が早いでしょうね。

ある程度自由に作れるようになってから自作で作れば良いと思います。
まともなグリッドを作るのは結構大変ですし。

jqueryを使って良ければ「jquery フィルタ grid」等で検索すれば嫌になるほど出てきますので、デザインのカスタマイズ等、自分に合う物を探してみれば良いかと思います。
ソースを見れば勉強にもなると思いますので。