码迷,mamicode.com
首页 > 其他好文 > 详细

全选,删除,添加

时间:2017-07-26 22:11:54      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:cli   pac   inner   节点   电脑   cells   last   create   href   

<!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//获取类名

 

全选,删除,添加

标签:cli   pac   inner   节点   电脑   cells   last   create   href   

原文地址:http://www.cnblogs.com/hdj1073678089/p/7241692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!