<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
500px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<table border="1" id="table1">
<caption>我是表格</caption>
<thead>
<tr>
<th>抬头1</th>
<th>抬头2</th>
<th>抬头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr id="tr1">
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
<tfoot>
<tr >
<td>尾部1</td>
<td>尾部2</td>
<td>尾部3</td>
</tr>
</tfoot>
</table>
<input type="button" value="插入新行" id="btn">
<input type="button" value="插入td" id="td1">
<input type="button" value="删除td" id="td2">
</body>
<script type="text/javascript">
var table1=document.getElementById("table1");
var btn=document.getElementById("btn");
var tr1=document.getElementById("tr1");
var td1=document.getElementById("td1");
var td2=document.getElementById("td2");
btn.onclick= function () {
table1.insertRow();
}
td1.onclick= function () {
tr1.insertCell(0);
}
td2.onclick= function () {
tr1.deleteCell(0);
}
</script>
</html>