`

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

JavaScriptHTML 
阅读更多

关键字: 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="删除" onclick="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" onclick="deleteRow(0)" value="删除"/></td>   
  35. </tr>   
  36. <tr>   
  37. <td>gaoxiang</td>   
  38. <td>28</td>   
  39. <td><input type="button" onclick="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" onclick="addRow();" value="新增"/>   
  46. </body>   
  47. </html>  
分享到：
| 精妙SQL语句收集_jackey
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DHTML实现表格的增加和删除

    **标题：“DHTML实现表格的增加和删除”** 在网页设计和开发中，动态超文本标记语言（Dynamic HTML，简称DHTML）是一种技术，它允许我们创建交互式和动态的Web页面，无需服务器端的刷新。这篇博文主要讨论了如何...

    vc+dhtml制作表格

    DHTML通过JavaScript来操作DOM（Document Object Model），这个模型是HTML文档的结构化表示，允许我们动态地改变页面内容、样式和行为。在VC++中，我们可以借助ActiveX或WebBrowser控件来嵌入HTML和JavaScript代码，...

    DHTML动态网页设计PPT教程

    此外，可能还会涉及DOM操作，如添加、删除和修改页面元素，以及事件处理，这些都是JavaScript实现网页动态效果的关键。JavaScript也是前端开发中不可或缺的一部分，它赋予网页交互性和实时性。 HTML（HyperText ...

    DHTML用户界面，使用方便

    DHTML（Dynamic HTML）是一种在网页上创建动态交互式用户界面的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）来实现页面的实时更新和交互性。在这个名为“DHTML用户界面，使用方便”的主题中，我们...

    推选用户直接使用集成的动态HTML语言(简称DHTML)来开发基于PPT资料.ppt

    DHTML是一种在HTML基础上结合CSS、JavaScript和DOM（文档对象模型）的技术，它允许开发者创建动态、交互性的Web内容，而无需复杂的服务器端处理。 在VB（Visual Basic）环境中，DHTML可以被用来构建基于Web的应用...

    javascript,css,dhtml,ext3.0,java web,api文档大全中文chm

    在`javascript手册.chm`和`JavaScript使用手册.chm`中，你可以找到关于变量、数据类型、函数、对象、DOM操作、事件处理等方面的详细信息。 **CSS**：CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种...

    dhtml教程和例子。

    DHTML，全称为Dynamic HTML，是一种用于创建交互式和动态网页的技术组合，它结合了HTML、CSS（层叠样式表）、JavaScript以及DOM（文档对象模型）等技术，使得网页内容能够在不重新加载整个页面的情况下进行更新。...

    DHTML 查询手册 动态html开发教程，web开发指导

    DHTML（Dynamic HTML）是一种用于构建交互式和动态网页的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）来实现页面的动态效果。本手册是针对DHTML技术的一份详尽教程，旨在帮助Web开发者更好地理解和...

    jxl、javascript、dhtml的api参考手册包

    `JavaScript手册－中文`提供了一个全面的API参考，包括DOM（文档对象模型）操作、事件处理、AJAX（异步JavaScript和XML）、浏览器兼容性函数等。JavaScript的核心概念，如变量、数据类型、控制结构、函数，以及ES6...

    javascript全帮助文档(JQuery,EasyUi,Js,DHtml)

    JavaScript是一种广泛应用于网页和网络应用的脚本语言，它主要负责客户端的交互和动态效果，使得用户界面更加生动和响应式。在这个压缩包中，包含了几个关键的JavaScript相关的框架和库的帮助文档，对于前端开发者来...

    DHTML中文手册-chm版

    DHTML，全称Dynamic HTML，是一种在网页上实现动态交互效果的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）等元素，使得静态的HTML页面变得生动有趣。 手册中的核心知识点包括： 1. **HTML基础**：...

    Dhtml速查工具

    5. DHTML应用场景：DHTML常用于创建交互式导航菜单、滑动图像展示、下拉效果、动态表格等。它还支持拖放功能、实时数据更新和复杂动画效果，极大地丰富了网页的交互性和视觉体验。 6. DHTML的挑战与兼容性：由于...

    DHTML手册(CHM).rar

    理解DOM树的概念，学会通过JavaScript操作DOM节点（如创建、删除、查找和修改节点），是实现DHTML动态效果的关键。 六、DHTML事件处理 事件是DHTML交互性的核心，比如点击、鼠标移动、页面加载等。通过绑定事件监听...

    DHTML中文参考手册

    它结合了HTML、CSS（层叠样式表）、JavaScript和DOM（文档对象模型），使网页能够实现动态更新、动画效果以及与用户的交互。DHTML中文参考手册旨在为开发者提供关于这一技术的全面指南。 **HTML参考** HTML...

    DHTML手册[网页制作完全手册]

    5. **DHTML的应用场景**：DHTML常用于创建下拉菜单、滑动图像、动态表格、弹出对话框等交互式效果。例如，使用JavaScript和CSS可以实现鼠标悬停时元素的变化，或者创建可拖动的界面元素。 6. **浏览器兼容性问题**...

    DHTML网页开发实例教程

    学习JavaScript的基本语法、函数、对象和DOM操作是理解DHTML实例的核心。 4. **DOM模型** DOM是HTML文档的结构表示，它允许JavaScript访问和修改页面上的每个元素。通过DOM，我们可以动态地添加、删除或修改页面...

    DHTML网页制作完全手册

    4. **DOM操作**：学习如何使用JavaScript操作DOM，动态添加、删除或修改网页内容。 5. **浏览器兼容性**：了解如何处理不同浏览器之间的差异，确保DHTML应用在各种环境下都能正常工作。 6. **实战项目**：通过实例...

    DHTML 学习手册详解

    DHTML（Dynamic HTML）是一种技术集合，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型），使网页具有动态交互性和丰富的用户体验。 1. **HTML基础与扩展**： - HTML是超文本标记语言，它是网页的基础。...

    DHTML 学习手册

    DHTML，全称Dynamic HTML，是一种在网页设计中使用的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）来实现动态交互的网页效果。这个“DHTML学习手册”专注于Java环境下的DHTML应用，尽管DHTML本身并不...

Magicbox
Global site tag (gtag.js) - Google Analytics