- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
- 动态操作表格
- </title>
- <script>
- var flag = false,
- number = 2;
- function addRow() {
- flag = !flag;
- // 添加一行
- var newTr = table1.insertRow(table1.rows.length);
- // 添加两列
- var newTd0 = newTr.insertCell();
- var newTd1 = newTr.insertCell();
- // 设置列内容和属性
- if (flag) {
- newTr.style.backgroud = "E0FFFF";
- } else {
- newTr.style.backgroud = "90FF90";
- }
- number++;
- newTd0.innerText = "第" + number + "行";
- }
- function delRow() {
- if (number > 1) {
- flag = !flag;
- table1.deleteRow(table1.rows.length - 1);
- number--;
- }
- }
- </script>
- </head>
- <body>
- <table width="200" cellspacing="1" id="table1" style="font-size:14px; border:1px solid #cad9ea;">
- <tr bgcolor="#90EE90">
- <td>
- 第 1 行
- </td>
- <td>
- </td>
- </tr>
- <tr bgcolor="#909090">
- <td>
- 第 2 行
- </td>
- <td>
- </td>
- </tr>
- </table>
- <input type="button" value="插入行" onClick="addRow()" />
- <input type="button" value="删除行" onClick="delRow()" />
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3064067.html