ベストアンサー

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

2010/04/12 22:22

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

cosboki
お礼率38% (89/231)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

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

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2010/04/13 12:23 回答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>

質問者