<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#table{
text-align: center;
}
</style>
<script>
function addNewTr(){
var index = document.getElementById("table").rows.length;
var newRow = document.getElementById("table").insertRow(index);
var td1 = newRow.insertCell(0);
var td2 = newRow.insertCell(1);
var td3 = newRow.insertCell(2);
var td4 = newRow.insertCell(3);
td1.innerHTML = "105";
td2.innerHTML = "小安妮";
td3.innerHTML = "4785123";
td4.innerHTML = "5478552";
}
function copyHeadTr(){
var thead = document.getElementById("table").rows[0];
var copyThead = thead.cloneNode(true);
thead.parentNode.appendChild(copyThead);
}
function deleFirstTr(){
document.getElementById("tbody").deleteRow(0);
}
</script>
</head>
<body>
<table border="1" width="500" id="table">
<thead>
<tr id="thead">
<td>编号</td>
<td>姓名</td>
<td>电话号码</td>
<td>月薪（元）</td>
</tr>
</thead>
<tbody id="tbody">
<tr id="firstTr">
<td>100</td>
<td>库里</td>
<td>125478</td>
<td>25410</td>
</tr>
<tr>
<td>101</td>
<td>科比</td>
<td>1478954</td>
<td>111111</td>
</tr>
<tr id="lastRow">
<td>102</td>
<td>图蓝天</td>
<td>4789512</td>
<td>245845</td>
</tr>
</tbody>
</table>
<br />
<input type="button" value="添加新行" onclick="addNewTr()"/>
<input type="button" value="复制表头行" onclick="copyHeadTr()" />
<input type="button" value="删除数据首行" onclick="deleFirstTr()"/>
</body>
</html>
