重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：cosboki
  • 質問日時：
  • 回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

英語力がないのでまったく自信がないけど、


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/04/13 13:44

No.2

  • 回答者： steel_gray
  • 回答日時：

#1 本質と関係ない部分だけどサンプルでの削除の仕方、間違ってました。


誤 $(this).parent().parent().empty();
正 $(this).parent().parent().replaceWith('');
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報