教えてgooの回答。http://oshiete1.goo.ne.jp/qa5740760.html

Javascript

http://oshiete1.goo.ne.jp/qa5740760.html
この質問に回答してみた。はっきりいうが、俺は暇じゃない！なぜか今夜は徹夜！
分割したのを合成するのが面倒な、あなた向け！
バグいっぱいあるなぁ！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>

<body>
<form action="#" id="test">
  <p>
    keyWord:
    <input type="text" size="20" id="key">
    <input type="button" value="previous" onclick="itemList.previousTable()">
    <input type="button" value="next" onclick="itemList.nextTable()">
  </p>
</form>

<table width="800" border="1" id="item">
  <thead>
    <tr>
      <th>Item List</th>
    </tr>
  </thead>
  
  <tbody>
    <tr><td>ほげ1</td></tr>
    <tr><td>ほげ2</td></tr>
    <tr><td>ふが1</td></tr>
    <tr><td>ふが2</td></tr>
    <tr><td>ふが3</td></tr>
    <tr><td>ふが4</td></tr>
    <tr><td>ほげ3</td></tr>
    <tr><td>ほげ4</td></tr>
    <tr><td>ほげ5</td></tr>
    <tr><td>ほげ6</td></tr>
    <tr><td>ほげ7</td></tr>
    <tr><td>ほげ8</td></tr>
    <tr><td>ほげ9</td></tr>
    <tr><td>ほげ10</td></tr>
    <tr><td>ほげ11</td></tr>
    <tr><td>ほげ12</td></tr>
    <tr><td>ほげ13</td></tr>
    <tr><td>ほげ14</td></tr>
    <tr><td>ほげ15</td></tr>
    <tr><td>ほげ16</td></tr>
  </tbody>
</table>

<script type="text/javascript">
//@cc_on

var Hoge = function ( ) { 
　this.vmax = 5;
　this.init.apply( this, arguments );
};


Hoge.prototype.init = function ( id ) {
　var e = document.getElementById( id );
　this.table = e;
　this.tbody = e.getElementsByTagName( 'tbody' );
　var tbody = this.tbody[0];
　var trs = tbody.childNodes;
　var cnt = 0;
　var tr, tds, td;
　
　for(; tr = trs[ cnt ]; ) {
　　if( 1 !== tr.nodeType )
　　　tbody.removeChild( tr );
　　else {
　　　tds = tr.childNodes;
　　　for( var cnt2 = 0; td = tds[ cnt2 ]; cnt2++ ) {
　　　　if( 1 !== td.nodeType )
　　　　　tr.removeChild( td );
　　　}
　　　cnt++;
　　}
　}
　
　tbody.style.display = 'none';
　
　this.page = 0;
　this.resetViewTable();
};


Hoge.prototype.resetViewTable = function ( sw ) {
　var b;
　var t = sw ? 1: 2;
　while( b = this.tbody[ t ] )
　　this.table.removeChild( b );
　this.page = -1;
　return this.page;
};


Hoge.prototype.nextTable = function ( n ) {
　n = n || 1;
　this.page = ( this.page + n ) % this.tbody.length;
　return this.viewTable( );
};


Hoge.prototype.previousTable = function ( n ) {
　n = n || 1;
　var len = this.tbody.length;
　this.page = ( len + this.page - ( n　% len ) ) % len;
　return this.viewTable( );
};


Hoge.prototype.viewTable = function ( ) {
　var n = this.page + 1;
　for( var c = 1, o; o = this.tbody[c]; c++ )
　　o.style.display = c == n ? 'table': 'none';
　return this.page;
};


Hoge.prototype.makeViewTable = function ( ) {
　this.resetViewTable();

　var tb = this.tbody[1];
　if( !tb ) return false;
　
　var trs = tb.childNodes, tr, tgtTbody = null;

　while( tr = trs[ this.vmax ] ) {
　　if( tgtTbody && tgtTbody.childNodes.length === this.vmax ) {
　　　this.table.appendChild( tgtTbody );
　　　tgtTbody = null;
　　}

　　if( !tgtTbody ) {
　　　tgtTbody = document.createElement( 'tbody' );
　　}
　　
　　tgtTbody.appendChild( tr );
　}

　if( tgtTbody ) 
　　this.table.appendChild( tgtTbody );

　return this.page = 0;
};


Hoge.prototype.find = function ( str, no ) {
　this.resetViewTable( true );
　var tgtTRs = this.tbody[0].childNodes;
　var addTbody = document.createElement( 'tbody' );
　var tr, cnt = 0, td, txt;
　
　no = 'number' === typeof no ? no: 0;
　
　while( tr = tgtTRs[ cnt++ ] ) {
　　td = tr.childNodes[ no ];
　　txt = td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/;
　　
　　if( -1 < txt.indexOf( str ) || '' == str )
　　　addTbody.appendChild( tr.cloneNode( true ) );

　}

　this.table.appendChild( addTbody );
　this.makeViewTable();
　this.viewTable();
}

var itemList = new Hoge( 'item' );

document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
　'keyup', (function ( ) {
　　var timerId = null;

　　return function ( evt ) {
　　　var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
　　　
　　　if( 'key' === e.id ) { //ユーザーネームのフォーム要素のid
　　　　timerId && clearTimeout( timerId );
　　　　timerId = setTimeout( function ( ) { itemList.find( e.value ); }, 250 );
　　　}
　　};
　})(), false );

</script>