JavaScript简单表格编辑功能实现方法
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下:
<html> <head> <scripttype="text/javascript"> functiongetInnerHTML() { alert(document.getElementById("tr2").innerHTML); } functioninsCell() { varx=document.getElementById('tr2').insertCell(0) x.innerHTML="TableRow,TableCell" } functiondelCell() { document.getElementById('tr2').deleteCell(0) } functiondeleteCaption() { document.getElementById('myTable').deleteCaption() } functioncreateCaption() { varx=document.getElementById('myTable').createCaption() x.innerHTML="MyTable" } functiondelRow() { document.getElementById('myTable').deleteRow(0) } functioninsRow() { varx=document.getElementById('myTable').insertRow(0); vary=x.insertCell(0); varz=x.insertCell(1); y.innerHTML="NewCell1"; z.innerHTML="NewCell2"; } </script> </head> <body> <center><tableid="myTable"border="1"> <trid="tr2"> <td>Row1cell1</td> <td>Row1cell2</td> </tr> <trid="tr2"> <td>Row2cell1</td> <td>Row2cell2</td> </tr> <trid="tr2"> <td>Row3cell1</td> <td>Row3cell2</td> </tr> </table> <br/> <center> <tableborder="0"> <tr><thcolspan="2">TableControler</th></tr> <tr><td> <center> <inputtype="button"onclick="createCaption()" value="Createcaption"></td><td> <center> <inputtype="button"onclick="deleteCaption()" value="Deletecaption"/> </td></tr> <tr><tdcolspan="2"> <center> <inputtype="button"onclick="getInnerHTML()" value="AlertinnerHTMLoftablerow"/> </td></tr> <tr><td> <center> <inputtype="button"onclick="insRow()" value="Insertrow"> </td><td> <center> <inputtype="button"onclick="delRow()" value="Deletefirstrow"> </td></tr> <tr><td> <center> <inputtype="button"onclick="insCell()" value="Insertcell"> </td><td> <center> <inputtype="button"onclick="delCell()" value="Deletecell"> </td></tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。