Blogger Information
Blog 20
fans 0
comment 0
visits 25249
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js实现表格勾选框全选功能
左手Leon的博客
Original
1199 people have browsed it

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		/*.main{margin:100px auto;width: 800px}
		table{border: 1px solid #ccc;border-collapse: collapse;width: 100%}
		td:{width: 800px; border: 1px solid #ccc;text-align: center;}*/
		.main{width:800px;margin:50px auto;}
		table{
			width:100%;
			border: 1px solid #ccc;
			border-collapse: collapse;
		}
		td{
			width:800px;border: 1px solid #ccc;
			text-align: center;
			line-height: 40px;
		}
		th{
			width:800px;border: 1px solid #ccc;
			text-align: center;
		}
	</style>
	<!-- <script type="text/javascript" src="static/js/jquery.js">
		
	</script> -->
</head>
<body>
	<div class="main">
		<table class="select">
			<caption>文章列表</caption>
			<thead>
				
				<tr>
					<th><input type="checkbox" onclick="checkAll()">全选</th>
					<th>文章标题</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>文章标题1</td>
					<td>文章状态1</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>文章标题2</td>
					<td>文章状态2</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>文章标题3</td>
					<td>文章状态3</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>文章标题4</td>
					<td>文章状态4</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>文章标题5</td>
					<td>文章状态5</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		function bgColor(){
			var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
			for(var k=0;k<trlist.length;k++){
				if(k%2==0){
					trlist[k].style.background='#ccc';
				}else{
					// trlist[k].style.background='red';
				}
			}
		}
		bgColor();
		
		function checkAll(){
			var objList=document.getElementsByName('list');
			console.log("objList="+objList.length);
			var count=0;
			for(var i=0;i<objList.length;i++){
				if(objList[i].checked){
					count++;
				}else{
					console.log(i+':未执行!')
					objList[i].checked=true;
				}
			}
			console.log(i);
			console.log(count);
			if(count==objList.length){
				for(var j=0;j<objList.length;j++){
					objList[j].checked=false
				}				
			}

		}

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

心得:

操作中出了2个BUG

1、表格实现隔行换色,但是一直只在表头中出现要的颜色,与之前课堂上做的案例不同

在控制台中发现网页代码有两个tbody

后来发现是因为表格中标题caption放的位置不对,把cation放在thead前即可

2、实现单独全选功能,一直无法实现全部选择

利用console.log发现功能当已经全选后取消全选勾选的功能未实现

检查代码发现是一个if判断中条件数值比较只写了一个=。数值对比要用到==或===

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post