• ベストアンサー

jQueryのプラグイン「Tablesorter」で要素の削除

jQueryのプラグイン「Tablesorter」でテーブルのソートをさせているのですが、 動的に行を追加したり削除する場合に困っています。 $("#myTable").tablesorter(); のようにテーブルをソートさせると、削除したはずの行が復活してしまうのです。 これはなにか対策などはあるのでしょうか？ ご存知のかたがおられましたら是非教えていただきたいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

英語力がないのでまったく自信がないけど、 http://tablesorter.com/docs/example-ajax.html ↑こちらのデータ追加読み込みのサンプルコードを見ると、テーブルの更新後に trigger("update") を入れるといいみたい。 ちなみに、trigger("update")を入れない状態で試したとき、追加分は確かにソートされなかったけど、削除した行が復活するという現象は確認できませんでした。削除の仕方にも問題あるかも。 以下は確認してみてたサンプル。 <html> <head> <title></title> <style type="text/css"> table,th,td {border:solid thin gray} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> $(function(){ $("table").tablesorter(); $("input[value='×']").live('click',function(){ //削除 $(this).parent().parent().empty(); $("table").trigger("update"); //これが重要？ }); $("input[value='＋']").live('click',function(){ //追加（コピー） var TR = $(this).parent().parent(); TR.after(TR.clone()); $("table").trigger("update"); //これが重要？ }); }); </script> </head> <body> <table> <thead> <tr><th>#</th><th>Name</th><th>DEL ADD</th></tr> </thead> <tbody> <tr> <td>1</td><td>John</td> <td><input type="button" value="×"><input type="button" value="＋"></td> </tr> <tr> <td>2</td><td>Paul</td> <td><input type="button" value="×"><input type="button" value="＋"></td> </tr> <tr> <td>3</td><td>George</td> <td><input type="button" value="×"><input type="button" value="＋"></td> </tr> <tr> <td>4</td><td>Ringo</td> <td><input type="button" value="×"><input type="button" value="＋"></td> </tr> </tbody> </table> </body> </html>

cosboki
質問者

お礼

回答ありがとうございます。 お蔭様で理想の動きができました。 ご丁寧にしてくださり、とても嬉しかったです。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

#1 本質と関係ない部分だけどサンプルでの削除の仕方、間違ってました。 誤 $(this).parent().parent().empty(); 正 $(this).parent().parent().replaceWith('');

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HTMLテーブルのソートとヘッダ固定が可能なプラグインを教えてください

    HTML以下の機能を持ったテーブルを実現したいと思います。 1. ソート 2. ヘッダの固定 何かよいプラグインがあれば教えてくれませんか？ お願いいたします。 現在は、以下のプラグインを使い ソート機能のみ実現しています。 jQuery 1.3.2 TableSorter 2.0.3 ここからの移行が簡単なものがあれば、なお助かります。

  • ページ内に複数表がある場合のTableSorteｒ

    現在、JavaScriptのTableSorterを使い、表内のデータのクライアント側ソートを実現しようとしています。 表が一枚の場合には問題はないのですが、表が２つになった場合に２つめの表がソート対象となってくれません。 どのようにすればソート対象になってくれるのでしょうか？ jQuery1.9.1+TableSorter2.0.5bの環境です。 ソースは一般的なものを使用していますので割愛しますが、 オリジナルな部分があるとすれば $(function(){ $("#myTable").tablesorter(); }); とだけ書いたjavascriptを読み込んでいること、 対象となるテーブルはidがmyTable(これだけの時は動作していた)とmyTable2の２つあるということです。 情報不足があればお知らせください。 よろしくお願いします。

  • JQueryの正規表現を使った表記を教えください。

    JQuery の正規表現 色々ためしているのですが上手く動作しません。 例えば Message-ID: .... > のような行があれば、この行を削除。 とする場合、どのように記述すればよいのでしょうか？ Messag-IDで始まり、改行で終わる行とすればと思いますが・・・ ご存知の方がいましたら教えて下さい。

  • 良い動きのするフラッシュの画像をJQUERYで再現

    とても良い動きのするフラッシュの画像を動かす機能を見たのですが、 JQUERYで同じようなことはできないのでしょうか？ 難しい場合は、このような動きをするJQUERYのプラグインをご存知でしたら教えてください。 http://www.lyfy.jp/

  • 【Access】レコードが削除できない

    どんな操作をしてそうなったかわからないんですが、 テーブルの最終行に全フィールドのデータが「#Deleted」になっているレコードが出来てしまいました。 このレコードを削除し、一旦テーブルを閉じて、また開くと同じものが復活しています。 どうすれば消せますでしょうか？？

  • jquery datatables 表に空白セル

    初めて質問させていただきます。 ｊquery datatables を使用しています。 http://www.datatables.net/ 表の中に空白セルが表示されてしまう現象があり、悩んでいます。 空白セルが表示された行は、そのセル１つ分だけ、行が飛び出ている形になります。 空白セルが表示される場所は固定されておらず ソートなどを行う度に表示される場所（行）は異なります。 少ないデータ件数だと表示されない場合があります。 同じような現象をご存知の方、どのように解決されたか 方法をご教授いただけたらうれしいです。 よろしくお願いします。

  • excel VBA フィルタでソートして行を削除する

    質問させていただきたいのですが、 フィルタでソートして、その結果について、行ごと全体を削除したい考えています。 データは10,000行程はあります。 フィルタでタイトル行は12行目、 ソートした結果は、14行目やその他ソート条件によって様々な行から表示されます。 タイトルは残して、ソートした結果の行を全て削除したい場合、どのようにすればいいのか教えていただきたく存じます。 初心者の質問で申し訳ございませんが、宜しくお願い致します。

  • 「テーブルに主キーがありません。」というエラーが出て困ってます。

    VisualStudioでASP.NETをやってます。初心者です。 データグリッドの削除ボタンを押して行を削除したいのですが、 テーブルに主キーがありません。というエラーが出てしまいます。 テーブルに主キーはあるんですけれども、原因がわかりません。 Dim mytable As DataTable Dim myrow As DataRow Dim key As String SqlDataAdapter1.Fill(DataSet11) key = DataGrid1.DataKeys(e.Item.ItemIndex) mytable = DataSet11.Tables("テーブル名") ↓ここでエラーになるようです。 myrow = mytable.Rows.Find(key) myrow.Delete() ご存知の方いらっしゃいましたら、よろしくお願いします。

  • POST時に要素を削除してからPOST

    もしご存じの方がおられましたら、何でも結構ですのでアドバイスいただけましたら助かります。 今、formのPOSTをしたときに、ある要素を削除してからPOST処理が走るようにしたいと思っています。 jQueryを利用して、以下のようにしていますが、 要素を削除したあと、POST処理が止まってしまって、画面がリロードされません。 これはなぜでしょうか？？ <form method="POST" action="index.php"> <input type="submit" name="submit" value="送信" onclick="jQuery('#target').remove();"> </form> ちなみに、jQueryのappendTo()といったメソッドならPOST処理は継続されました。 removeやdetachはだめみたいです。 こういった場合どのようにしたら良いのでしょうか。。 よろしくお願いします。

  • jqueryを使って無駄なspanタグを削除したい

    お世話になります。 jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか？ 例えば以下のhtmlがあった場合、 ------------------------------------------ <span class="a">あいうえお</span> <span>かきくけこ</span> <span class="b">さしすせそ</span> <span>たちつてと</span> ------------------------------------------ jqueryを使うことで、 ------------------------------------------ <span class="a">あいうえお</span> かきくけこ <span class="b">さしすせそ</span> たちつてと ------------------------------------------ このように無駄なspanタグを削除したいのですが、可能でしょうか？ ご存知の方、ご回答いただければ幸いです。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する