クリアボタンの動作について　その３

解決済

質問者：mano31
質問日時：2013/02/21 14:41
回答数：3件

ご存知の方、ご教授くださいm(__)m

クリアボタンの動作についてその２、の続きです。

現在、画面上で表示された表項目を消去するために表データクリアボタンを設置しており、
画面中の、表データを削除したいと考えています。

現状のHTMLは以下のようなものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq … type="text/javascript">
$().ready ( function() {
$('.buttons :button[name=clear]').click ( function() {
alert('come!');
$('input[type="text"]').not('[disabled="disabled"]').val ( '' );
$('input[type="checkbox"]').removeAttr ( 'checked' );
});
$('.buttons :button[name=clear_table]').click ( function() {
alert('come2!');
//<tbody>の中身を消すコード
});
});
</script>
<style type="text/css">
</style>
</head>
<body id="main">
<form>
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n1" value="3" disabled>
<hr>
<input type="checkbox" value="2">
<input type="checkbox" value="2">
<hr>
<button type="button" name="clear">クリア</button>
<button type="button" name="table_clear">表クリア</button>

</form>
<div class="data_area">
<table id="schedule_head_table" class="data_table" border=1>
<thead>
<tr>
<th width="60">No.</th>
<th width="100">品名コード</th>
</tr>
</thead>
<tbody id=tbody>
<tr>
<td><div class=right-align>1</div></td>
<td>item_code</td>
</tr>
</tbody>
</table>
　 </div>
</body>
</html>

解決方法を教えていただけると助かります。
もし可能であれば、クリアボタン自体が動作しない理由も教えていただれば、今後の参考にさせていただきます。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2013/02/21 19:43

こんにちは。

一応、動作確認して回答していますのでタイプミス等のケアレスミスだと思います。
先のURLにも適用したのでソースを見比べて見てください。

質問内容もケアレスミスが多いので落ち着いて見てみてください。

ちなみにtbodyに以下のようなidを付けた場合
<tbody id="id-tbody">

にtbodyを削除するのであればセレクタは
$('#id-tbody')となります。

id-tbody内のtrの一行目を選択するなら
$('#id-tbody tr:eq(0)')となります。

- 0
- 件

通報する

この回答へのお礼

LancerVII様

いただいた内容で無事解決できました。

ケアレスミスについては注意したいと思います。

今回も丁寧な説明とサンプル実装、ありがとうございました！m(__)m

通報する

お礼日時：2013/02/22 10:30

No.2

回答者： LancerVII
回答日時：2013/02/21 18:03

こんにちは。

$('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を付けてみましたが、
それでも動きませんでした。

何か他に理由が考えられそうでしょうか？

たびたびお手数をおかけして申し訳ないのですが、よろしくお願いいたします。

補足日時：2013/02/21 19:25

通報する

- 0
- 件

通報する

No.1

回答者： LancerVII
回答日時：2013/02/21 15:31

こんにちは。

まず動作しないのはセレクタの記述が間違っています。
提示された表クリアボタンであれば$('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様

いつも回答していただき、ありがとうございます。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>

上部の表が消えてしまうのは仕方ないのでしょうか。

お手数おかけして申し訳ありませんがフォローお願いいたします。

よろしくお願いいたします。