全选与否和删除多行

最新推荐文章于 2023-09-20 10:39:42 发布

chaoyv

最新推荐文章于 2023-09-20 10:39:42 发布

阅读量204

点赞数

分类专栏： JS 粗浅文章标签： xhtml javascript ViewUI

JS 粗浅专栏收录该内容

48 篇文章 2 订阅

订阅专栏

<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-family: "Helvetica","Arial",sans-serif;
	background-color: #fff;
	color: #000;
}
table {
	margin: auto;
	border: 1px solid #699;
}
caption {
	margin: auto;
	padding: .2em;
	font-size: 1.2em;
	font-weight: bold;
}
th {
	font-weight: normal;
	font-style: italic;
	text-align: left;
	border: 1px dotted #699;
	background-color: #9cc;
	color: #000;
}
th,td {
	width: 10em;
	padding: .5em;
}
</style>
</head>

<body>
<table id="stu">
	<caption>学员信息表</caption>
	<thead>
		<tr>
        	<th><input type="checkbox"  name="nameCheck" οnclick="checkAll(this.checked)" />全选</th>
			<th>学号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>国籍</th>
		</tr>
	</thead>
	<tbody>
		<tr>
        	<td><input type="checkbox" name="nameCheck" /></td>
			<td>S001</td>
			<td>Danny</td>
			<td>26</td>
			<td>China</td>
		</tr>
		<tr>
        	<td><input type="checkbox" name="nameCheck" /></td>
			<td>S002</td>
			<td>Jack</td>
			<td>24</td>
			<td>USA</td>
		</tr>
		<tr>
        	<td><input type="checkbox" name="nameCheck" /></td>
			<td>S003</td>
			<td>William</td>
			<td>26</td>
			<td>England</td>
		</tr>
		<tr>
        	<td><input type="checkbox" name="nameCheck"/></td>
			<td>S004</td>
			<td>Jenny</td>
			<td>24</td>
			<td>Swiss</td>
		</tr>
		<tr>
        	<td><input type="checkbox" name="nameCheck" /></td>
			<td>S005</td>
			<td>Donald</td>
			<td>24</td>
			<td>China</td>
		</tr>
		<tr>
        	<td><input type="checkbox" name="nameCheck" /></td>
			<td>S006</td>
			<td>Betty</td>
			<td>24</td>
			<td>Taiwan</td>
		</tr>
	</tbody>
</table>
<div style="width:900px; margin:20px auto;"><input type="button" value="删除多行" οnclick="delRow();" /></div>
<script type="text/javascript">
//全选
function checkAll(val){
  var arr = document.getElementsByName("nameCheck");
  //循环全选和非全选
  for(var i=0;i<arr.length;i++){
	  arr[i].checked = val;
  }
}
//删除多行
function delRow(){
	var checkArr=document.getElementsByName("nameCheck");
	var count=0;
	var arr=new Array();
	for(var i=1;i<checkArr.length;i++){
		if(checkArr[i].checked == true){
			arr[count]=i;
			count++;
		}
	}
	if(count==0){
		alert("请选择你要删除的行");
	}else{
		var wu="你确定要删除第"+arr+"条吗？";
		if(confirm(wu)){
			for(var j=arr.length-1;j>=0;j--){
				document.getElementById("stu").deleteRow(arr[j]);
			}
			alert("删除成功");	
		}
	}	
}

</script>
</body>
</html>

效果图：

个人E-mail：chaoyi77@163.com

chaoyv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选与否和删除多行

ype="text/css"&gt;body { font-family: "Helvetica","Arial",sans-serif; background-color: #fff; color: #000;}table { margin: auto; border: 1px solid #699;}caption { margin: auto; padding: .2em; font
复制链接

扫一扫