操作表格

chaoyi

浏览: 309696 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

JS 粗浅

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body {
	font-size:13px;
	line-height:25px;
}
table {
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	width:300px;
}
td {
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}
.center {
	text-align:center;
}
</style>
<script type="text/javascript">
function addRow(){
	var fRow=document.getElementById("row3");
	//创建行节点
	var newRow=document.createElement("tr");
	//创建单元格节点
	var col1=document.createElement("td");
	//为单元格添加文本
	col1.innerHTML="幸福来了";
	var col2=document.createElement("td");
	col2.innerHTML="154.12";
	col2.setAttribute("align","center");
	//追加
	newRow.appendChild(col1);
	newRow.appendChild(col2);
	document.getElementById("row3").parentNode.insertBefore(newRow,fRow);
}
function updateRow(){
	var uRow=document.getElementById("row1");
	//标题行的样式
	uRow.setAttribute("style","	font-weight:bold;text-align:center;background:#ccc;");
}
function delRow(){
	//访问被删除的行
	var dRow=document.getElementById("row2");
	//删除行
	dRow.parentNode.removeChild(dRow);
}
function copyRow(){
	//访问复制的行
	var oldRow=document.getElementById("row3");
	//复制指定的行及子节点
	var newRow=oldRow.cloneNode(true);
	//在指定节点的未尾添加行
	document.getElementById("myTable").appendChild(newRow);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow();"  />
<input name="b2" type="button" value="删除第2行" onclick="delRow();" />
<input name="b3" type="button" value="修改标题样式" onclick="updateRow();"  />
<input name="b4" type="button" value="复制最后一行" onclick="copyRow();"  />
</body>
</html>

效果图：