<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom操作节点</title>
<style type="text/css">
body{font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #F00;
border-left: 1px solid #F00;
width:300px;
}
td{
border-bottom: 1px solid #3FF;
border-right: 1px solid #3FF;
}
.title{
text-align:center;
font-weight:bold;
background-color:#0C6;
}
</style>
<script type="text/javascript">
function one(){
var newtr = document.createElement("tr");
var newtd1 = document.createElement("td");
var text1 = document.createTextNode("图书3");
newtd1.appendChild(text1);
var newtd2 = document.createElement("td");
var text1 = document.createTextNode("33.00");
newtd1.appendChild(text2);
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
document.getElementById("row1").parentNode.appendChild(newtr);
}
function two(){
var myTable = document.getElementById("myTable");
var colltr = myTable.getElementsBytagname("tr");
if(colltr.length>=2){
var deltr = myTable.getElementsBytagname("tr")[1];
deltr.parentNode.removeChild(deltr);
}
}
function san(){
var gai = document.getElementById("row1");
gai.className = "title";
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id = "row1"><td>书名</td><td>价格</td></tr>
<tr id = "row2"><td>图书1</td><td>33.00</td></tr>
<tr id = "row3"><td>图书2</td><td>33.00</td></tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="one()"/>
<input name="b2" type="button" value="删除第2行" onclick="two()"/>
<input name="b3" type="button" value="修改标题" onclick="san()"/>
</body>
</html>
打开点击没有效果,什么原因,怎么改呢,刚学dom搞不明白
相关分类