JavaScript简单表格编辑功能实现方法
2015-04-16 10:52
1046 查看
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下:
<html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementById('tr2').insertCell(0) x.innerHTML="Table Row, Table Cell" } function delCell() { document.getElementById('tr2').deleteCell(0) } function deleteCaption() { document.getElementById('myTable').deleteCaption() } function createCaption() { var x=document.getElementById('myTable').createCaption() x.innerHTML="My Table" } function delRow() { document.getElementById('myTable').deleteRow(0) } function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.insertCell(1); y.innerHTML="New Cell 1"; z.innerHTML="New Cell 2"; } </script> </head> <body> <center><table id="myTable" border="1"> <tr id="tr2"> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr id="tr2"> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr id="tr2"> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <center> <table border="0"> <tr><th colspan="2">Table Controler</th></tr> <tr><td> <center> <input type="button" onclick="createCaption()" value="Create caption"></td><td> <center> <input type="button" onclick="deleteCaption()" value="Delete caption" /> </td></tr> <tr><td colspan="2"> <center> <input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" /> </td></tr> <tr><td> <center> <input type="button" onclick="insRow()" value="Insert row"> </td><td> <center> <input type="button" onclick="delRow()" value="Delete first row"> </td></tr> <tr><td> <center> <input type="button" onclick="insCell()" value="Insert cell"> </td><td> <center> <input type="button" onclick="delCell()" value="Delete cell"> </td></tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JavaScript的String类型replace()方法介绍和使用replace()方法实现简单html模板替换功能
- javaScript实现定时显示隐藏、BOM对象方法介绍、表单简单校验、表格换色、DOM、二级联动
- javaScript实现定时显示隐藏、BOM对象方法介绍、表单简单校验、表格换色、DOM、二级联动
- jQuery实现的简单动态添加、删除表格功能示例
- JavaScript实现简单生成随机颜色的方法
- JavaScript实现离开页面前提示功能【附jQuery实现方法】
- 用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。
- jqgrid实现简单的单行编辑功能
- JavaScript简单实现合并两个Json对象的方法示例
- JS简单实现点击跳转登陆邮箱功能的方法
- 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
- javaScript和jQuery自动加载简单代码实现方法
- Django实现简单分页功能的方法详解
- 最简单方法:windows平台下python安装opencv,即实现import cv2功能
- JavaScript实现的超简单计算器功能示例
- thinkphp中create()方法实现简单的用户注册表单验证功能
- javascript简单实现等比例缩小图片的方法
- javascript将table的td变为可编辑的input,实现表格动态编辑
- javascript基础-实现简单功能
- JavaScript数值千分位格式化的两种简单实现方法