您的位置：首页 > 其它

对表格进行批量操作如全选反选删除功能

2015-10-06 03:14 519 查看 
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Select All</title>
<style>
table{
border:#999 1px solid;
border-collapse:collapse;
}
table th{
text-align:center;
}
table td{
border:1px solid #999;
text-align:center;
}
.one{
background:#6cf;
}
.two{
background:#fc6;
}
</style>

<script type="text/javascript" language="javascript">
function changecolor(){
var tr=document.getElementsByTagName("tr");

4000
tr[0].style.background="#0066ff";
tr[tr.length-1].style.background="#0066ff";
}
function changebox(type) {
var tbs = document.getElementById("tbs");
var chks = tbs.getElementsByTagName("input");
switch (type) {
case "qx":
for (var i = 0; i < chks.length; i++) {
chks[i].checked = true;
}
break;
case "qxx":
for (var i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
break;
case "fx":
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked == true) {
chks[i].checked = false;
} else {
chks[i].checked = true;
}
}
break;
}
}
function del(){
var input=document.getElementsByName("check[]");
for(var i=input.length-1; i>=0; i--){
if(input[i].checked==true){
var td=input[i].parentNode;
var tr=td.parentNode;
var table=tr.parentNode;
table.removeChild(tr);
}
}
}
</script>
</head>
<body onload="changecolor()">
<table width="400" border="0" align="center">
<tr>
<th>选项</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tbody id="tbs">
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr>
<th>选项</th>
<td colspan="3" align="center">
<input type="button" id="qx" onclick="changebox('qx')" value="全选">
<input type="button" id="qxx" onclick="changebox('qxx')" value="取消全选">
<input type="button" id="fx" onclick="changebox('fx')" value="反选">
<input type="button" id="del" onclick="del()" value="删除选选附件">
</td>
</tr>
</tbody>
</table>

</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航