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>