開発メモ,主に補足by子連れ親父プログラマー

2010-09-15

jQuery で table をいじるときは tbody を忘れない

まぁ普通に会員の一覧検索みたいな管理画面を作っていて、普通に table でタグが組んであって、それを項目名をクリックしたらその項目名の昇順で並び替えたいとか、そんなような作業ってのは結構あるわけで。
なんかこう、テーブルのそのデータ行の部分だけを 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>
の部分だけを出力してやればよいです。

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー