用循环可以全选

Original 2019-06-04 17:58:25 235
abstract:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> table{ border: 1px solid black; text-align: center; width:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

table{

border: 1px solid black;

text-align: center;

width: 500px;

margin: 0 auto;

}

table thead tr td{

border: 1px solid black;

background: #FFFF00;

}

table tbody tr td{

border: 1px solid black;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<td><input type="checkbox" onclick="changes(this.checked)"  id="head" />全选</td>

<td>编号</td>

<td>姓名</td>

<td>年龄</td>

</tr>

</thead>

<tbody>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>001</td>

<td>佐菲</td>

<td>100</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>002</td>

<td>初代</td>

<td>99</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>003</td>

<td>赛文</td>

<td>88</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>004</td>

<td>艾斯</td>

<td>77</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>005</td>

<td>杰克</td>

<td>66</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>006</td>

<td>泰罗</td>

<td>55</td>

</tr>

<tr>

<td><input type="checkbox" name="checkone"/></td>

<td>007</td>

<td>雷欧</td>

<td>44</td>

</tr>

</tbody>

</table>

</body>

<script>

//获取所有行

var tbody=document.getElementsByTagName("tbody")

for (var i=0;i<tbody[0].rows.length;i++) {

if(i%2==0){

tbody[0].rows[i].style.backgroundColor="pink";

}else{

tbody[0].rows[i].style.backgroundColor="red";

}

}


function changes(checks){

//获取全选框的状态

var checkones=document.getElementsByName("checkone");

if(checks==true){

for (var a=0;a<checkones.length;a++) {

checkones[a].setAttribute("checked","checked");

}

}else{

for (var a=0;a<checkones.length;a++) {

checkones[a].removeAttribute("checked");

}

}


}


</script>



Correcting teacher:查无此人Correction time:2019-06-05 09:28:31
Teacher's summary:完成的不错。js功能非常强大,要好好练习。继续加油。

Release Notes

Popular Entries