みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる

はじめて、投稿いたします。

現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。
ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。
tableのtrが3つ以上ある場合は、指定した行が正常に削除します。
しかし、IEだと、trが2つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。
ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。
どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか?
よろしくお願いします。
以下に、ソースを貼っておきます。
<html>

<head>
<script type="text/javascript">
<!--
function delete_tr(html_this) {
var TR = html_this.parentNode.parentNode;
TR.parentNode.deleteRow(TR.sectionRowIndex);
var table = document.getElementById('test_table');
var tr_num;
var td_num;
for (tr_num = 0; tr_num < table.rows.length; tr_num++) {
for (td_num = 0; td_num < table.rows[tr_num].cells.length; td_num++) {
alert(table.rows[tr_num].cells[td_num].innerHTML);
}
}
}
-->
</script>
</head>

<body>
<h1>Hello World !!</h1>
<table border="1" id="test_table">
<tr>
<td>
<input type="button" value="delete" onClick="delete_tr(this)" />
</td>
<td style="display: none;">------ bbbb ------</td>
<td>------ cccc ------</td>
</tr>
<tr>
<td>
<input type="button" value="delete" onClick="delete_tr(this)" />
</td>
<td style="display: none;">------ BBBB ------</td>
<td>------ CCCC ------</td>
</tr>
<tr align="center">
<td colspan="3">
<input type="button" value="add">
</td>
</tr>
</table>

</body>
</html>

投稿日時 - 2009-08-30 16:37:51

QNo.5249074

すぐに回答ほしいです

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

deleteRow()ではなく、removeChild()してみては?

function delete_tr(obj) {
var p=obj.parentNode;
while(p){if(p.nodeName=="TR") break;p=p.parentNode;}
var TR = p;
TR.parentNode.removeChild(TR);
}

投稿日時 - 2009-08-30 17:38:17

お礼

早速,動作させてみたところ,IEとfirefoxで
同様な動きを実現することができました.
removeChildを使えばよかったんですね.

ありがとうございました!!

投稿日時 - 2009-08-30 19:38:35

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問