JavaScript简单表格编辑功能实现方法
JavaScript简单表格编辑功能实现方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下:functiongetInnerHTML(){a...

本文实例讲述了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" value="Create caption"></td><td> <center> <input type="button" value="Delete caption" /> </td></tr> <tr><td colspan="2"> <center> <input type="button" value="Alert innerHTML of table row" /> </td></tr> <tr><td> <center> <input type="button" value="Insert row"> </td><td> <center> <input type="button" value="Delete first row"> </td></tr> <tr><td> <center> <input type="button" value="Insert cell"> </td><td> <center> <input type="button" value="Delete cell"> </td></tr> </table> </body> </html>

希望本文所述对大家的javascript程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类