<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="删除" onclick="b()" />
//删除按钮
<input type="button" name="c1" id="c1" value="添加" onclick="add()" />
//添加按钮
<table border="1px" cellspacing="0" cellpadding="0">
//table表格
<tr>
<td><input type="checkbox" name="c" id="c1" value="9000" /></td>
<td>电脑</td>
<td>9000元</td>
<td>
<a href="#" onclick="delet(this)">删除</a>
//onclick触发事件，删除方法
</td>
</tr>
<tr>
<td><input type="checkbox" name="c" id="c2" value="3000" /></td>
<td>电脑</td>
<td>5600元</td>
<td>
<a href="#" onclick="delet(this)">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="c" id="c3" value="5400" /></td>
<td>眼镜</td>
<td>5400元</td>
<td>
<a href="#" onclick="delet(this)">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="c" id="c4" value="15000" /></td>
<td>手机</td>
<td>1500元</td>
<td>
<a href="#" onclick="delet(this)">删除</a>
</td>
</tr>
<tr id="s3">
<td>
<input type="checkbox" id="s1" value="全选" onclick="a()" />全选
//点击全选框时，所有的商品全部选择，a方法。
</td>
<td colspan="2" id="s2"><input type="button" name="" id="" value="总价" />
//colspan="2"合并单元格
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var checks = document.getElementsByName("c"); /*一次性的获取相同name的元素，让他们的name值一样*/
var s1 = document.getElementById("s1");//获取全选框ID
var s2 = document.getElementById("s2");//获取总价ID
function a() { /*onclick点击事件使得全选在点击后有所变化*/
var flag = s1.checked;
/*全选后改变字体的判断*/
if(flag) {
/*innerHTML改变标签体*/
s1.innerHTML = "取消";
//写入页面
} else {
s1.innerHTML = "全选"
}
for(var i in checks) { /*使用循环将每一个都能选中*/
checks[i].checked = flag; /*要是全选，就使得其他商品的checked属性与全的checked属性一致*/
var sum = 0;
}
}
/*将选中的商品的价格算总价*/
onload = function() {
var s2 = document.getElementById("s2");
s2.onclick = function() {
var c1s = document.getElementsByName("c");
var sum = 0;
for(var i = 0; i < c1s.length; i++) {
if(c1s[i].checked) {
sum += parseInt(c1s[i].value);
}
}
alert(sum);
}
}
function delet(anode) { //a标签下的值
//获取tr父
var tbody = document.getElementsByTagName("tbody")[0];
///*通过兄弟关系找到tr*/
var tr = anode.parentNode.parentNode;
//删除tr标签
tbody.removeChild(tr);
}
//添加标签
function add() {
//创建tr
var tr = document.createElement("tr");
//创建td
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
//td添加数据
td1.innerHTML = "<input type='checkbox' name='c' value='300'/>";
td2.innerHTML = '刚添加的商品';
td3.innerHTML = '145';
td4.innerHTML = "<a href='#' onclick='delet(this)'>删除</a>";
//把td放入tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//把td放到table
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
//
var last = document.getElementById("s3");
//往body中添加tr
tbody.insertBefore(tr, last);
}
function b() {
var c = document.getElementsByName("c");
for(var i = 0; i < c.length; i++) {
var cri = c[i];
if(cri.checked) { //判断cri市truee或false
var tbody = document.getElementsByTagName("tbody")[0];
var tr = cri.parentNode.parentNode;
tbody.removeChild(tr);
i--;
}
}
}
</script>
找标签：nextSibling下一个标签
previousSibling上一个标签
创建标签节点：creatEement
添加子节点：appendchild
getElementsByTagName//获取标签
getElementsByName//获取姓名
getElementById//获取id
getElementsByClassName//获取类名