JavaScript简单表格编辑功能实现方法
更新时间:2015年04月16日 10:52:31 作者:令狐不聪
这篇文章主要介绍了JavaScript简单表格编辑功能实现方法,涉及javascript操作表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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 中 null、NaN和undefined的区别总结
js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型,接下来与大家分享下它们之间的区别2013-04-04用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
用js实现table单元格宽度和高度调整,有合并单元格也可以的.兼容IE6,7,8以及FF,附上代码css,html,js三部份,有需要的朋友可以参考一下2013-06-06JavaScript错误处理try..catch...finally+涵盖throw+TypeError+RangeEr
这篇文章主要介绍了JavaScript错误处理:try..catch...finally+涵盖throw+TypeError+RangeError,文章内容具有一定的参考价值,需要的小伙伴可以参考一下,希望对你有所帮助2021-12-12ES6新特性二:Iterator(遍历器)和for-of循环详解
这篇文章主要介绍了ES6新特性二:Iterator(遍历器)和for-of循环,结合实例形式分析了ES6中Iterator(遍历器)和for-of循环遍历操作的相关实现技巧与注意事项,需要的朋友可以参考下2017-04-04js判断手机是否安装并打开app,未安装则安装app【兼容Android、ios,亲测可用】
这篇文章主要介绍了js判断手机是否安装并打开app,未安装则安装app,通过调用浏览器判断app,兼容Android、ios等系统,,需要的朋友可以参考下2023-05-05
最新评论