[转]使用Javascript动态增加，删除表格（使用DHTML对象模型）

最新推荐文章于 2019-11-15 17:13:21 发布
最新推荐文章于 2019-11-15 17:13:21 发布
阅读量86 收藏
点赞数
分类专栏： js应用 文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qsfwy/article/details/83261603
版权

关键字: javascript 表格

Java代码 复制代码
  1. <html>   
  2. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />   
  3. <head>   
  4.   
  5. <script language="javascript">   
  6. function deleteRow(index){   
  7. var tableObj=document.getElementById("mytable");   
  8. tableObj.deleteRow(index);   
  9. }   
  10. function addRow(){   
  11. var tableObj=document.getElementById("mytable");   
  12. var newRowObj=tableObj.insertRow(tableObj.rows.length);   
  13. var newColName=newRowObj.insertCell(newRowObj.cells.length);   
  14. var newColAge=newRowObj.insertCell(newRowObj.cells.length);   
  15. var newColButton=newRowObj.insertCell(newRowObj.cells.length);   
  16.   
  17. newColName.innerHTML=document.getElementById("newName").value;   
  18. newColAge.innerHTML=document.getElementById("newAge").value;   
  19. newColButton.innerHTML='<input type="button" value="删除" οnclick="deleteRow('+(tableObj.rows.length-1)+')">';   
  20. }   
  21. </script>   
  22. </head>   
  23.   
  24. <body>   
  25. <table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0">   
  26. <tr>   
  27. <td>姓名</td>   
  28. <td>年龄</td>   
  29. <td>操作</td>   
  30. </tr>   
  31. <tr>   
  32. <td>gaoxiang</td>   
  33. <td>28</td>   
  34. <td><input type="button" οnclick="deleteRow(0)" value="删除"/></td>   
  35. </tr>   
  36. <tr>   
  37. <td>gaoxiang</td>   
  38. <td>28</td>   
  39. <td><input type="button" οnclick="deleteRow(1)" value="删除"/></td>   
  40. </tr>   
  41. </table>   
  42.   
  43. <input type="text" name="name" id="newName" />   
  44. <input type="text" name="age" id="newAge"/>   
  45. <input type="button" οnclick="addRow();" value="新增"/>   
  46. </body>   
  47. </html>  
qingsf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之-文档对象模型(DOM)
qf2019的博客
11-19 295
JavaScript之 -文档对象模型(DOM)：DOM -----Document Object Model 文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操 作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理...
使用Javascript动态增加，删除表格（使用DHTML对象模型）
陈杰的专栏
02-02 794
html>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />head>script language="javascript">...  function deleteRow(index)...{    var tableObj=document.getElementById("mytable");    tab
JavaScript之-文档对象模型
stray-heart的博客
11-15 283
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操 作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用 Java Applet 或 ActiveX 等复杂...
Javascript-网页编程-DHTML-表格创建/删除/设置/排序
Discovering,Thinking and Finding——This Is My Logic
07-17 399
、对表格的一些操作（创建，删除，设置颜色，排序等） 1、创建表格 1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强 2）利用table中的现有的功能实现的 注： 1、表格的,标签和标签中间，其实还隐藏着一个标签----表格体，下面才是 2、如果和之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点
使用Javascript动态增加，删除表格
凌于淳风的专栏
02-13 481
  使用Javascript动态增加，删除表格（使用DHTML对象模型）  此种方式只能删除表格的最后一行，如果需要删除指定行，需要使用W3C的对象模型，因为每次删除完表格行后，其他使用DHTML对象模型的行的index都会重新变化，也就是说我原来有5行0,1,2,3,4  删除第3行是没有问题的，但删除后原来序号为4的行，就变成3了，使用deleteRow(4)就会报错  
JavaScript之------文档对象模型(DOM)
Discovering,Thinking and Finding——This Is My Logic
07-10 507
DOM -----Document Object Model 文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操 作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前
好程序员分享JavaScript之-文档对象模型(DOM)
qq_35970166的博客
11-07 117
好程序员分享JavaScript之 -文档对象模型(DOM)：DOM -----Document Object Model 文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操 作它们。”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等...
推选用户直接使用集成的动态HTML语言(简称DHTML)来开发基于PPT资料.ppt
最新发布
11-13
DHTML是一种在HTML基础上结合CSS、JavaScript和DOM（文档对象模型）的技术，它允许开发者创建动态、交互性的Web内容，而无需复杂的服务器端处理。 在VB（Visual Basic）环境中，DHTML可以被用来构建基于Web的应用...
DHTML实现表格的增加和删除
03-01
**标题：“DHTML实现表格的增加和删除”** 在网页设计和开发中，动态超文本标记语言（Dynamic HTML，简称DHTML）是一种技术，它允许我们创建交互式和动态的Web页面，无需服务器端的刷新。这篇博文主要讨论了如何...
html CSS javascript 使用手册
03-29
JScript手册涵盖了JavaScript的基础语法、变量、数据类型、运算符、流程控制、函数、对象、事件处理等核心概念。通过学习JavaScript，你可以创建动态特效、验证表单、操作DOM（Document Object Model）、实现Ajax...
jxl、javascript、dhtml的api参考手册包
07-23
`JavaScript手册－中文`提供了一个全面的API参考，包括DOM（文档对象模型）操作、事件处理、AJAX（异步JavaScript和XML）、浏览器兼容性函数等。JavaScript的核心概念，如变量、数据类型、控制结构、函数，以及ES6...
DHTML用户界面，使用方便
11-30
DHTML（Dynamic HTML）是一种在网页上创建动态交互式用户界面的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）来实现页面的实时更新和交互性。在这个名为“DHTML用户界面，使用方便”的主题中，我们...
onclick事件实现div的隐藏和显示
qsfwy的专栏
07-24 9971
在IE内( 6 7 都一样) 运行下面代码 ,代码可以从附件里下载 (大家可以看一下 dom结构多么的简单啊) Html代码 &lt;html&gt;    &lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;    &lt;title&gt;IE BUG -...
JS判断单个checkbox是否被选中
qsfwy的专栏
08-28 2846
方法一： &lt;script&gt; function check() { var lee=document.forms["form1"].lee;if (lee.checked == true)  {  alert('true');  }  else  {  alert('false');  } } &lt;/script&gt; &lt;form name="form1"&gt;&lt;i...
setInterval("",1000) 和setTimeout(,3000);的使用
qsfwy的专栏
10-08 1814
应用代码一：     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&l
DIV边框代码
qsfwy的专栏
10-08 1746
立体线框代码稍加润色后的效果： &lt;div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge;border-bottom-style:Ridge;border-width: 7pt; background-color:#8B008B"&gt;&lt;div style="width...
"使用集成DHTML开发基于PPT资料的VB应用程序
推选用户直接使用集成的动态HTML语言（简称DHTML）来开发基于PPT资料.ppt；在VB里，用户直接使用集成的动态HTML语言（简称DHTML）来开发基于HTML语言的应用程序。 DHTML是一种用于开发基于HTML的动态应用程序的集成...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值