お世話になります
<input type="text" name="search" id="search">
<table width="800" border="0" id="item" name="item">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="hoge.html">
<img src="hoge.jpg">
</a>
<b>ほげ</b>
</td>
</tr>
<tr>
<td>
<a href="hogehoge.html">
<img src="hogehoge.jpg">
</a>
<b>ほげほげ</b>
</td>
</tr>
</tbody>
</table>
※本来はTR要素がもっと沢山増えます。
このテーブルに対して表示件数が5件を超えたらページ送りができるようにし、テキストボックスの内容で検索をかけて表示をしたいのですが、何か良い解決案はありませんか?
一応自分でもいろいろ調べて
http://d.hatena.ne.jp/Rewish/20090703/1246615343
http://ponk.jp/?p=2413
を共存させるようとしてみたのですがどうもうまく動作しませんでした。
A 回答 (8件)
- 最新から表示
- 回答順に表示
No.8
- 回答日時:
> No.1 お礼
> 検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。
これはCGIで処理すべき内容では?
もしくは5件表示 -> ページ送りの時は全件を消してAjaxで次の5件を取得、表示
かと。
<div id="output"><table>略</table></div>
<a onclick="next()">次へ</a>
function next(){
// ajaxでデータを取得(略)
// responseTextはCGIアプリでHTMLに整形済み
document.getElementById('output').innerHTML=xhr.responseText;
// またはJSONやCSV、XMLからHTML-Elementに変換する
var elmentdata= xhr.responseTextなどをdocument.createElement()などでごにょごにょしたもの
var output=document.getElementById('output');
output.replaceChild(elementdata, output.firstChild);
}
No.7
- 回答日時:
全角空白は、半角空白になおしてください。
みすがあったら、じぶんでなおしてね。
いか、むししてください。
>jQuery使えばそんなに長いコードにならないです。
わくわく。わくわく。わくわく。わくわく。
No.6
- 回答日時:
//その3
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>
//もじすうのせいげんは、なんとかならんものかなぁ~~~
//このあいだのしつもんにこたえてみたものをつぎたしました
//はんかくすうじの「12」と、ゆっくりうちこめば、いみがわかるかな?
//ひつようないとおもうけど^^;
No.5
- 回答日時:
//その2
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' );
No.4
- 回答日時:
じぶんにぴったりのふんどしがないので、いとをつぐむところから!って。
なんかさぁ~ハードルをあげられたような・・。
そしてながくなるたび、ミスがうじゃうじゃ?
ながいので、きっとぶんかつです。
<!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;
};
No.3
- 回答日時:
george723様が最初に調べた2つサンプルサイトにあるjavascript
を共存させて実現できます。
ちょっと、いんちきしています。
検索マッチした時<tr>タグに勝手にhits属性なるものをjQuryで付加し、
マッチした<tr>のみ、ページ送りの対象要素としちゃってます。
(firefox3.5とIE8.0でうまくいきました。)
(見本)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
<style type="text/css">
td, th {
border: 1px solid black;
padding: 1px;
}
#prev, #next {
color: red;
cursor: pointer;
}
</style>
<script type="text/javascript" charset="utf-8">
<!--
$(function() {
var tr = $('tr','#item tbody');
var page = 0;
$.fx.off = true;
$('#search').keyup(function(){
$("#navi").empty();
var query = $(this).val().replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ').split(' ');
if (query[0] === '') {
tr.show();
return;
}
tr.each(function(){
var self = $(this);
var itemName = $('td:nth-child(1)',self).text();
for(var i=0,len=query.length;i<len;i++){
if (!itemName.match(new RegExp(query[i],'i'))){
self.hide();
self.removeAttr("hit");
return;
}else{
self.attr("hit","hit");
return;
}
}
self.show();
self.removeAttr("hit");
});
var hits=$("tr[hit='hit']");
if(hits.length > 5){
$("<span id=\"prev\"><</span><span id=\"page\"></span><span id=\"next\">></span>").appendTo("#navi");
$('#prev').click(function() {
if (page > 0) {
page--;
draw(hits);
}
});
$('#next').click(function() {
if (page < ($(hits).size()) / 5 - 1) {
page++;
draw(hits);
}
});
draw(hits);
}
});
function draw(hits) {
$('#page').html(page + 1);
hits.hide();
hits.slice(page*5,page*5+5).show();
}
});
// -->
</script>
</head>
<body>
<input type="text" id="search">
<div id="navi"></div>
<table width="800" border="0" id="item">
<thead><tr><th></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>
</body>
</html>
あまりスマートじゃないです。とってつけたような、
人のふんどしを集めて別のふんどしにしているような、
どうせなら、
No2.様の回答の 「ことば(かな)」の部分を
最初から作りなおした方がよいでしょう。jQuery使えばそんなに
長いコードにならないです。
No.2
- 回答日時:
プログラムがかなりながくなりそうなので、ことば(かな)で。
<tbody>は、ふくすうあってもよいので、さいしょのtbody[0]をデータぶぶんとして非ひょうじにする
けんさくじょうけんがみたされたものを、tbody[1]をつくりそれにコピーする。
tbody[1]のtrのぎょうすうをかぞえ、5ぎょうをこえたら、tbody[2]に
さらにふえたなら、[3][4]とつくり、それぞれにいどうする。
ひょうじには、tbody[0]いがいを、きりかえる
というのはどうだろう?
No.1
- 回答日時:
jQueryを使って実装することが出来ます。
ページ送り:http://ponk.jp/?p=2413
簡易検索:http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jque …
ご回答ありがとうございます。
指定していただいたurlのページ送りと簡易検索を実装すると、検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。
説明不足で申し訳ありませんでした
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
一覧から選択した行の行番号を...
-
プルダウンで選択すると、DBの...
-
階層式メニューをtableタグ内に
-
マウスをブラウザの外に出した...
-
右の一覧表から必要なものをク...
-
JavaScriptでテーブルの行入れ替え
-
tableの任意行にfocusをあてる
-
ラジオボタンでテーブルの背景...
-
JavaScriptでテーブルをクリッ...
-
javascriptでボタンを押すたび...
-
至急!GetElementById でtdの...
-
「オブジェクトは、このプロパ...
-
テーブルの項目の値取得
-
クリックされた罫表セルの行番...
-
Jquery on click 発火しない
-
【JQuery】テーブルで行選択さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
特定<table>内の<td>の色を変える
-
マウスをブラウザの外に出した...
-
添付画像のようなhtmlとcssのス...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
JavaScriptでテーブルをクリッ...
-
階層式メニューをtableタグ内に
-
マウスオーバー時テーブルの背...
おすすめ情報