收藏
批改狀態(tài)：未批改
老師批語：
<!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>狀態(tài)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章標題1</td>
<td>文章狀態(tài)1</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章標題2</td>
<td>文章狀態(tài)2</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章標題3</td>
<td>文章狀態(tài)3</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章標題4</td>
<td>文章狀態(tài)4</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章標題5</td>
<td>文章狀態(tài)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+':未執(zhí)行！')
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、表格實現(xiàn)隔行換色，但是一直只在表頭中出現(xiàn)要的顏色，與之前課堂上做的案例不同
在控制臺中發(fā)現(xiàn)網頁代碼有兩個tbody
后來發(fā)現(xiàn)是因為表格中標題caption放的位置不對，把cation放在thead前即可
2、實現(xiàn)單獨全選功能，一直無法實現(xiàn)全部選擇
利用console.log發(fā)現(xiàn)功能當已經全選后取消全選勾選的功能未實現(xiàn)
檢查代碼發(fā)現(xiàn)是一個if判斷中條件數(shù)值比較只寫了一個=。數(shù)值對比要用到==或===
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
