jQuery で table をいじるときは tbody を忘れない
なんかこう、テーブルのそのデータ行の部分だけを Ajax で load するようにしたいなと。
思ったわけです。
で、テーブルは普通に、こんな感じであって、
<table id="result"> <tr> <th>ID</th> <th>氏名</th> <th>メールアドレス</th> </tr> <tr> <td>1</td> <td>山田</td> <td>yamada@・・・.jp</td> </tr> <tr> <td>2</td> <td>佐藤</td> <td>sato@・・・.jp</td> </tr> </table>このデータ行の部分だけを Ajax で書き換えたいってことなんですが、どうすればいいですかね?
テーブルの2行目以降を一旦 remove() とかで消して、そこに append() すりゃいいんじゃないかとか、いろいろ悩んでみたんだけど、結局、tbodyを使うってことで解決しました。
先のテーブルを以下のように書き直します。
<table id="result"> <thead> <tr> <th>ID</th> <th>氏名</th> <th>メールアドレス</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>山田</td> <td>yamada@・・・.jp</td> </tr> <tr> <td>2</td> <td>佐藤</td> <td>sato@・・・.jp</td> </tr> </tbody> </table>そして、
$(document).ready(function() { $('#result tbody').load( './result.php', $('form').serialize(), function(data){} ); });と jQuery で書きます。
result.php にはページ中のフォームの値がGETで渡っていくので、それを適当に処理してクエリーをかけて結果を元に
<tr> <td>1</td> <td>山田</td> <td>yamada@・・・.jp</td> </tr> <tr> <td>2</td> <td>佐藤</td> <td>sato@・・・.jp</td> </tr>の部分だけを出力してやればよいです。