- ベストアンサー
クリアボタンの動作についてその３
- クリアボタンの動作について調査を行いました。
- 表データを削除するためのクリアボタンを設置しています。
- 実装されているスクリプトの動作を確認し、問題がないか調査しています。
- mano31
- お礼率33% (4/12)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 一応、動作確認して回答していますのでタイプミス等のケアレスミスだと思います。 先のURLにも適用したのでソースを見比べて見てください。 質問内容もケアレスミスが多いので落ち着いて見てみてください。 ちなみにtbodyに以下のようなidを付けた場合 <tbody id="id-tbody"> にtbodyを削除するのであればセレクタは $('#id-tbody')となります。 id-tbody内のtrの一行目を選択するなら $('#id-tbody tr:eq(0)')となります。
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 $('buttons[name=table_clear]').click ( function() { の部分ですが、 $('button[name=table_clear]').click ( function() { です。 セレクタについて調べてみると良いです。 例えば上の例ではbuttonというタグのnameがtable_clearについて取得しています。(buttonsというタグは無い) 関係ない部分が消えてしまうのもセレクタの問題です。 一個の表でしか考えていなかったので$('tbody').remove();で実装しました。 この場合、全ての<tbody>がセレクトされていますので質問者様のような現象が起きています。 HTMLの構成次第で作り方がいろいろ出来てしまいますがある特定のtbodyとわかっているのであれば（先のHTMLだとすると) テーブルにIDが付いていますので $('#schedule_head_table tbody').remove(); と指定するとid="schedule_head_table"に属するtbodyが削除されることになります。 本当にいろいろな指定の仕方が出来ますのでセレクタの記述方法を理解すると良いです。
補足
いつも迅速な回答、ありがとうございます。 セレクタについてはより深く勉強してみます。 ご指摘ありがとうございます。 本題の件ですが、いただいた内容を参考に実装してみたところ、 tableには確かにIDが付いていますので、予想通りに動くかと思ったのですが 残念ながら動きませんでした。 試しにtbodyにschedule_head_tableというIDを付けてみましたが、 それでも動きませんでした。 何か他に理由が考えられそうでしょうか？ たびたびお手数をおかけして申し訳ないのですが、よろしくお願いいたします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 まず動作しないのはセレクタの記述が間違っています。 提示された表クリアボタンであれば$('buttons[name=table_clear]')です。 (table_clearとclear_tableも間違えているので見てみてください) また<tbody>を消したいのであれば $('tbody').remove(); <tbody>の中の行を消したいのであれば $('tbody').find('tr').remove(); 特定の行であれば $('tbody').find('tr:eq(1)').remove(); になります。 http://hppg.moe.hm/okwave/qa/q7954963/ 例により上のアドレスで動作確認できます。 (表クリアは2行目を削除してみています)
お礼
LancerVII様 ご回答ありがとうございました。 いただいた内容で無事動作させることができました！ 本当にLancerVII様には感謝、感謝です。 ありがとうございました！
補足
LancerVII様 いつも回答していただき、ありがとうございます。m(__)m ご指摘の内容もふまえ、以下のように変更してみました。 $().ready ( function() { $('buttons[name=clear]').click ( function() { alert('come!'); $('input[type="text"]').not('[disabled="disabled"]').val ( '' ); $('input[type="checkbox"]').removeAttr ( 'checked' ); }); $('buttons[name=table_clear]').click ( function() { alert('come2!'); $('tbody').remove(); }); }); ですが、ボタンが反応しないのは変わらずでした。(当然onclickのところは直しました。) まだtypoか何かあるのでしょうか？ また、主題の件ですが、 別の環境で試してみたところ、確かにtbody部分は消えるものの、サンプルには書いていなかったのですが tbodyの表の上部にもう一つ表があり、これの内容も消えるようになってしまいました。 （この上部の表は消したくない） タグだけ書くと、以下のような感じのHTMLになっています。 <body> <div><table><tr><td><table> ←この表が消えてしまう <tr><td></td></tr></table> </td></tr> </table></div> <div><table> <thead><tr>...</thead> <tbody><tr>...</tbody> ←この部分の中身を消したく、無事消せている </table></div> </body> 上部の表が消えてしまうのは仕方ないのでしょうか。 お手数おかけして申し訳ありませんがフォローお願いいたします。 よろしくお願いいたします。
お礼
LancerVII様 いただいた内容で無事解決できました。 ケアレスミスについては注意したいと思います。 今回も丁寧な説明とサンプル実装、ありがとうございました！m(__)m