用javascript删除行出现错误

discovery10 2009-09-04 03:39:21

我写了一个JS用于删除table中的一行，但JS执行的没效果，错误查了很久也没查出来，请各位高手帮帮忙

<html>

	<head>

		<title>表格测试</title>

		<meta http-equiv="content-type" content="text/html; charset=GB2312"/>

		<script type="text/javascript">

			function deleteRow(m) {

				var t1 = m.parentNode.parentNode;

				document.getElementById("ta").removeChild(t1);

			}

		</script>

	</head>

	<body>

		<table width="500" style="border:1px solid #99ccff;" id="ta">

			<tr><td>123</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>223</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>323</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>423</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>523</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>623</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

			<tr><td>723</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

		</table>

	</body>

</html>

...全文

114 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

helanye 2009-09-05

打赏
举报

<tr>的parentNode是 <tbody>，而不是 <table>，所以你只能用 <tbody>进行remove
这样设置就对了

JavaAlpha 2009-09-05

打赏
举报

我是这么写的
if (table1.rows.length>rowNum)
{
table1.deleteRow(rowNum);
}

但是每行的 td的 name无法改变

楼主遇到了此问题吗？

real_name 2009-09-04

打赏
举报

直接 document.getElementById("ta").deleteRow(m);
不是更简单

浴火_凤凰 2009-09-04

打赏
举报

代码放到HTML文件后面

BeenZ 2009-09-04

打赏
举报



    //因为tr不是table(id=ta)的子节点,所以不能用

     alert(document.getElementById("ta").childNodes[1]);//undefined

xinyung 2009-09-04

打赏
举报

[Quote=引用 2 楼 discovery10 的回复:]
谢谢。
var t1 = m.parentNode.parentNode;
document.getElementById("ta").removeChild(t1);
但我不知道这样写为什么会错，浏览器报个参数无效。
[/Quote]
<tr>的parentNode是<tbody>，而不是<table>，所以你只能用<tbody>进行remove
这样设置就对了：

<table width="500" style="border:1px solid #99ccff;">

        	<tbody id="ta">

            <tr><td>123</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>223</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>323</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>423</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>523</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>623</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

            <tr><td>723</td><td>234</td><td><button onclick="deleteRow(this);">删除</button></td></tr>

          </tbody>

        </table>

风沙不去驼铃声 2009-09-04

打赏
举报

document.getElementById("ta").getElementsByTagName("tbody")[0].removeChild(t1);

popule_daisy 2009-09-04

打赏
举报

还是设置为隐藏吧。



<html>

    <head>

        <title>表格测试</title>

        <meta http-equiv="content-type" content="text/html; charset=GB2312"/>

        <script type="text/javascript">

            function deleteRow(m) {

			  var id="tr"+m;

                    document.getElementById(id).style.display="none";

            }

        </script>

    </head>

    <body>

        <table width="500" style="border:1px solid #99ccff;" id="ta">

            <tr id="tr1"><td>123</td><td>234</td><td><button onClick="deleteRow(1);" ID="Button1">删除</button></td></tr>

            <tr id="tr2"><td>223</td><td>234</td><td><button onClick="deleteRow(2);" ID="Button2">删除</button></td></tr>

            <tr id="tr3"><td>323</td><td>234</td><td><button onClick="deleteRow(3);" ID="Button3">删除</button></td></tr>

            <tr id="tr4"><td>423</td><td>234</td><td><button onClick="deleteRow(4);" ID="Button4">删除</button></td></tr>

            <tr id="tr5"><td>523</td><td>234</td><td><button onClick="deleteRow(5);" ID="Button5">删除</button></td></tr>

            <tr id="tr6"><td>623</td><td>234</td><td><button onClick="deleteRow(6);" ID="Button6">删除</button></td></tr>

            <tr id="tr7"><td>723</td><td>234</td><td><button onClick="deleteRow(7);" ID="Button7">删除</button></td></tr>

        </table>

    </body>

</html>

discovery10 2009-09-04

打赏
举报

谢谢。
var t1 = m.parentNode.parentNode;
document.getElementById("ta").removeChild(t1);
但我不知道这样写为什么会错，浏览器报个参数无效。

BeenZ 2009-09-04

打赏
举报



<html>

    <head>

        <title>表格测试</title>

        <meta http-equiv="content-type" content="text/html; charset=GB2312"/>

        <script type="text/javascript">

            function deleteRow(m) {

              //  if(document.getElementById("ta").rows.length <= 0) ;

                    document.getElementById("ta").deleteRow(m);

            }

        </script>

    </head>

    <body>

        <table width="500" style="border:1px solid #99ccff;" id="ta">

            <tr><td>123</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button1">删除</button></td></tr>

            <tr><td>223</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button2">删除</button></td></tr>

            <tr><td>323</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button3">删除</button></td></tr>

            <tr><td>423</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button4">删除</button></td></tr>

            <tr><td>523</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button5">删除</button></td></tr>

            <tr><td>623</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button6">删除</button></td></tr>

            <tr><td>723</td><td>234</td><td><button onclick="deleteRow(this);" ID="Button7">删除</button></td></tr>

        </table>

    </body>

</html>