<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="400" border="1" id="tb1">
<tr>
<td>书名</td>
<td>价格</td>
</tr>
<tr>
<td>21天精通Java</td>
<td>99</td>
</tr>
<tr>
<td>21天精通C#</td>
<td>99</td>
</tr>
<tr>
<td>21天精通JSP</td>
<td>99</td>
</tr>
</table>
<button onclick="addRow();">增加一行</button>
<button onclick="delRow();">删除最后一行</button>
<button onclick="chgStyle();">修改标题样式</button>
<button onclick="cloneRow();">复制最后一行</button>
<script>
//获取对象
function getEl(id){
return document.getElementById(id);
}
//在对象中按标签名找对象
function getElByTag(obj,tag){
return obj.getElementsByTagName(tag);
}
//创建对象
function createEl(tag){
return document.createElement(tag);
}
var tb=getEl("tb1");//获取table对象
var tbody=getElByTag(tb,"tbody")[0];//获取tbody对象
//复制最后一行
function cloneRow(){
var trs=getElByTag(tb,"tr");//获取所有行
var tr=trs[trs.length-1];//获取最后一行
var newTr=tr.cloneNode(true);//克隆一个新行
tbody.appendChild(newTr);//增加新行
}
//修改表头的样式
function chgStyle(){
var trs=getElByTag(tb,"tr");//获取所有行
var tr=trs[0];//获取表头行
tr.style.backgroundColor="#ccc";//修改样式-背景颜色
}
//删除最后一行
function delRow(){
var trs=getElByTag(tb,"tr");//获取所有行
if(trs.length==1){//如果只有一行
alert("只剩表头，不能删除!");
return;
}
var tr=trs[trs.length-1];//获取最后一行
tbody.removeChild(tr);//删除行
}
//增加行
function addRow(){
var tr=createEl("tr");//创建行对象
var td1=createEl("td");//创建第一列
var td2=createEl("td");//创建第二列
td1.innerHTML="测试";//填写第一列内容
td2.innerHTML="88";//填写第二列内容
//装配
tr.appendChild(td1);//装配第一列
tr.appendChild(td2);//装配第二列
tbody.appendChild(tr);//装配行
}
</script>
</body>
</html>