用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>
...全文
113 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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>
  • 打赏
  • 举报
回复
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>

《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。   《编写可维护的JavaScript》作者Nicholas C. Zakas是顶级的Web技术专家,也是《JavaScript高级程序设计》一书的作者。他曾是Yahoo!的首席前端开发工程师,在完成了从一名“独侠”到“团队精英”的蜕变后,他站在前端工程师的角度提炼出众多的最佳编程实践,其中包括很多业内权威所推崇的最佳法则,而这些宝贵经验正是本书的核心内容。   《编写可维护的JavaScript》适合前端开发工程师、JavaScript程序员和学习JavaScript编程的读者阅读,也适合开发团队负责人、项目负责人阅读。运用本书中讲述的技巧和技术,可以使JavaScript团队编程从侠义的个人偏好的阴霾走出来,走向真正的高可维护性、高效能和高水准。 第一部分 编程风格 第1章 基本的格式化 1.1 缩进层级 1.2 语句结尾 1.3 的长度 1.4 换 1.5 空 1.6 命名 1.6.1 变量和函数 1.6.2 常量 1.6.3 构造函数 1.7 直接量 1.7.1 字符串 1.7.2 数字 1.7.3 null 1.7.4 undefined 1.7.5 对象直接量 1.7.6 数组直接量 第2章 注释 2.1 单注释 2.2 多注释 2.3 使用注释 2.3.1 难于理解的代码 2.3.2 可能被误认为错误的代码 2.3.3 浏览器特性hack 2.4 文档注释 第3章 语句和表达式 3.1 花括号的对齐方式 3.2 块语句间隔 3.3 switch语句 3.3.1 缩进 3.3.2 case语句的“连续执” 3.3.3 default 3.4 with语句 3.5 for循环 3.6 for-in循环 第4章 变量、函数和运算符 4.1 变量声明 4.2 函数声明 4.3 函数调用间隔 4.4 立即调用的函数 4.5 严格模式 4.6 相等 4.6.1 eval() 4.6.2 原始包装类型 第二部分 编程实践 第5章 UI层的松耦合 5.1 什么是松耦合 5.2 将JavaScript从CSS中抽离 5.3 将CSS从JavaScript中抽离 5.4 将JavaScript从HTML中抽离 5.5 将HTML从JavaScript中抽离 5.5.1 方法1:从服务器加载 5.5.2 方法2:简单客户端模板 5.5.3 方法3:复杂客户端模板 第6章 避免使用全局变量 6.1 全局变量带来的问题 6.1.1 命名冲突 6.1.2 代码的脆弱性 6.1.3 难以测试 6.2 意外的全局变量 避免意外的全局变量 6.3 单全局变量方式 6.3.1 命名空间 6.3.2 模块 6.4 零全局变量 第7章 事件处理 7.1 典型用法 7.2 规则1:隔离应用逻辑 7.3 规则2:不要分发事件对象 第8章 避免“空比较” 8.1 检测原始值 8.2 检测引用值 8.2.1 检测函数 8.2.2 检测数组 8.3 检测属性 第9章 将配置数据从代码中分离出来 9.1 什么是配置数据 9.2 抽离配置数据 9.3 保存配置数据 第10章 抛出自定义错误 10.1 错误的本质 10.2 在JavaScript中抛出错误 10.3 抛出错误的好处 10.4 何时抛出错误 10.5 try-catch语句 10.6 错误类型 第11章 不是你的对象不要动 11.1 什么是你的 11.2 原则 11.2.1 不覆盖方法 11.2.2 不新增方法 11.2.3 不删除方法 11.3 更好的途径 11.3.1 基于对象的继承 11.3.2 基于类型的继承 11.3.3 门面模式 11.4 关于Polyfill的注解 11.5 阻止修改 第12章 浏览器嗅探 12.1 User-Agent检测 12.2 特性检测 12.3 避免特性推断 12.4 避免浏览器推断 12.5 应当如何取舍 第三部分 自动化 第13章 文件和目录结构 13.1 最佳实践 13.2 基本结构 第14章 Ant 14.1 安装 14.2 配置文件 14.3 执构建 14.4 目标操作的依赖 14.5 属性 14.6 Buildr项目 第15章 校验 15.1 查找文件 15.2 任务 15.3 增强的目标操作 15.4 其他方面的改进 15.5 Buildr任务 第16章 文件合并和加工 16.1 任务 16.2 尾结束符 16.3 文件头和文件尾 16.4 加工文件 第17章 文件精简和压缩 17.1 文件精简 17.1.1 使用YUI Compressor精简代码 17.1.2 用Closure Compiler精简 17.1.3 使用UglifyJS精简 17.2 压缩 17.2.1 运时压缩 17.2.2 构建时压缩 第18章 文档化 18.1 JSDoc Toolkit 18.2 YUI Doc 第19章 自动化测试 19.1 YUI Test Selenium引擎 19.1.1 配置一台Selenium服务器 19.1.2 配置YUI Test Selenium引擎 19.1.3 使用YUI Test Selenium引擎 19.1.4 Ant的配置写法 19.2 Yeti 19.3 PhantomJS 19.3.1 安装及使用 19.3.2 Ant的配置写法 19.4 JsTestDriver 19.4.1 安装及使用 19.4.2 Ant的配置写法 第20章 组装到一起 20.1 被忽略的细节 20.2 编制打包计划 20.2.1 开发版本的构建 20.2.2 集成版本的构建 20.2.3 发布版本的构建 20.3 使用CI系统 20.3.1 Jenkins 20.3.2 其他CI系统 附录A JavaScript编码风格指南 附录B JavaScript工具集

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧