6、添加行、删除行和删除列

时间:2022-12-08 17:14:47

添加行、删除行和删除列

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript">
7 function addRow(){
8 var table=document.getElementById("mytable");
9 var rowindex=table.rows.length;
10 var row=table.insertRow(rowindex);
11 row.insertCell(0).innerHTML="3";
12 row.insertCell(1).innerHTML="4";
13 }
14 function delRow(){
15 var table=document.getElementById("mytable");
16 var rowindex=table.rows.length;
17 table.deleteRow(rowindex-1);
18 }
19 function delCell(){
20 var table=document.getElementById("mytable");
21 var rowindex=table.rows.length;
22 table.rows[rowindex-1].deleteCell(0);
23 }
24 </script>
25 </head>
26
27 <body>
28 <input type="button" value="删除一行" onclick="delRow()"/>
29 <input type="button" value="添加一行" onclick="addRow()"/>
30 <input type="button" value="单元格一行" onclick="delCell()"/>
31 <table id="mytable" border="1">
32 <tr><td>1</td><td>2</td></tr>
33 </table>
34 </body>
35 </html>

1、运行效果图

6、添加行、删除行和删除列

2、添加行

6、添加行、删除行和删除列

3、删除行

6、添加行、删除行和删除列

4、删除列

6、添加行、删除行和删除列