![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。
ご教授宜しくお願いします。
function test()
{
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
tb1.deleteRow(i);
}
}
};
<table border="1" id="tb1">
<tr>
<td><input type="checkbox" name="flag" value=""></td>
<td>0</td>
</tr>
・
・
・
<tr>
<td><input type="checkbox" name="flag" value=""></td>
<td>9</td>
</tr>
</table>
<input type="button" value="削除" onclick="test();"><br>
}
No.5ベストアンサー
- 回答日時:
こんな風にすると、流れがわかりやすいかと
<script>
function test(){
var p=document.getElementById("tb1").getElementsByTagName("tbody")[0];
var n=p.firstChild;
while(n){
var d=null;
if(n.nodeName=="TR" && n.getElementsByTagName("input")[0].checked) d=n;
n=n.nextSibling;
if(d) p.removeChild(d);
}
}
</script>
<table border="1" id="tb1">
<tbody>
<tr><td><input type="checkbox"></td><td>0</td></tr>
<tr><td><input type="checkbox"></td><td>1</td></tr>
<tr><td><input type="checkbox"></td><td>2</td></tr>
<tr><td><input type="checkbox"></td><td>3</td></tr>
<tr><td><input type="checkbox"></td><td>4</td></tr>
<tr><td><input type="checkbox"></td><td>5</td></tr>
<tr><td><input type="checkbox"></td><td>6</td></tr>
<tr><td><input type="checkbox"></td><td>7</td></tr>
<tr><td><input type="checkbox"></td><td>8</td></tr>
<tr><td><input type="checkbox"></td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="削除" onclick="test();"><br>
No.3
- 回答日時:
調べてないけど、
削除する毎に行番号がずれこむのでうまくいかないのでは?
for (var i = inputs.length; i>=0 ; i--) {
こんな風に逆順で処理してみては?
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?e8efa67)
No.2
- 回答日時:
訂正
if( obj.tagName =='INPUT' && obj.type=='checkbox' && (obj = parentSearch( obj, 'TR' )) ) obj.removeNode( obj );
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?e8efa67)
No.1
- 回答日時:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "?
http://www.w3.org/TR/html4/strict.dtd"><title>Calendar</title>
<table border="1">
<tr><td><input type="checkbox">abc</td></tr>
<tr><td><input type="checkbox">def</td></tr>
<tr><td><input type="checkbox">ghi</td></tr>
<tr><td><input type="checkbox">jkl</td></tr>
<script type="text/javascript">
addEvent( document.body, 'click', chk );
function chk( evt ){
var obj = evt.target || evt.srcElement;
if( obj = parentSearch( obj, 'TR' ) ) obj.removeNode( obj );
}
function parentSearch(elementId, tagname){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
while( element.tagName != tagname ){
if(element.tagName == 'BODY') return false;
element = element.parentNode;
} return element;
}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@cc_on @if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableの任意行にfocusをあてる
-
一覧から選択した行の行番号を...
-
至急!GetElementById でtdの...
-
プルダウンで選択すると、DBの...
-
階層式メニューをtableタグ内に
-
【JQuery】テーブルで行選択さ...
-
JavaScriptで特定のtdタグにcla...
-
ハイパーリンクを別ウインドウ...
-
動的なtableの値を取得したい
-
テーブルの項目の値取得
-
\\u30ad\\u30fc\\u30dc・・・と...
-
domでの削除
-
tdの中をクリックしたらチェッ...
-
javascript クリックすると、あ...
-
jspのエラー
-
Selectボックスの幅を自動で広...
-
onchangeイベントを強制的に発...
-
ボタン2回押しを無効にしたい
-
<JavaScript>tableタグを入力不...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報