动态表格(全选/反选/背景等)
HTML
<body> <form action="javascript:void(0);"> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" id="add" value="添加"> </form> <!--表格的标准写法--> <table> <caption>学生信息表</caption> <thead> <tr> <!--<td><input type="checkbox" name="cb" id="ck_all" onchange="ckAll()"></td>--> <th><input type="checkbox" name="cb" id="ck_all" class="cb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr onmouseenter="changeBg()" onmouseleave="changeBg()"> <td><input type="checkbox" name="cb" class="cb" onclick="ckAllCheck(this)" ></td> <td>1</td> <td>令狐冲</td> <td>性别</td> <td><a href="javascript:void(0);" onclick="deleteRow(this)">删除</a></td> </tr> </tbody> </table> <div id="div1"> <input type="button" id="select_all" value="全选"> <input type="button" id="select_none" value="全不选"> <input type="button" id="select_rev" value="反选"> </div> </body>
CSS样式
<style> form{ text-align: center; } table{ width: 500px; border: 2px solid red; margin: 0 auto; } td,th{ border: 1px solid red; text-align: center; } #div1{ /*margin-left: 30%;*/ margin-top: 10px; margin-left: 25%; /*margin-right: auto;*/ position: relative; } .enter{ background-color: #2aabd2; } .leave{ background-color: white; } </style>
JS
<script>
var arr_cks = new Array(); //全局数组用来存储第几个checkbox被选中了--即checkbox的索引值
window.onload = function () {
document.getElementById("add").onclick = function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var tbody = document.getElementsByTagName("tbody")[0];
console.log(tbody.innerHTML);
tbody.innerHTML +="<tr onmouseenter=\"changeBg()\" onmouseleave=\"changeBg()\">\n" +
" <td><input type=\"checkbox\" name=\"cb\" class=\"cb\" onclick=\"ckAllCheck(this)\" ></td>\n" +
" <td>"+id+"</td>\n" + //这里不需要转义""
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"deleteRow(this)\">删除</a></td>\n" + //如果是内部完整字符串需要进行转义
" </tr>";
var cbs = document.getElementsByClassName("cb");
alert(arr_cks+"----");
cbs[0].checked = false;
for(var i=0;i<cbs.length;i++){
for(var j=0;j<arr_cks.length;j++){
if(i==arr_cks[j]){
cbs[i].checked = true;
}
}
}
}
//全选复选框==>该"ck_all"复选框是不变的
document.getElementById("ck_all").onchange = function () {
// alert(document.getElementById("ck_all").checked);
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=this.checked;
}
}
//全选按钮
document.getElementById("select_all").onclick = function () {
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=true;
}
}
//全不选
document.getElementById("select_none").onclick = function () {
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked = false;
}
}
//反选
document.getElementById("select_rev").onclick = function () {
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked = !cbs[i].checked;
if(i==0)
cbs[i].checked = false;
}
alert(arr_cks+"-------1");
//重置arr_cks数组
var flag = false;
for(var i=1;i<cbs.length;i++){ //i是checkbox的索引
for(var j=0;j<arr_cks.length;j++){
if(i==arr_cks[j]){
var index = arr_cks.indexOf(i); //获取在arr_cks中的索引
arr_cks.splice(index,1); //删除掉
flag = true; //存在相同的索引
}
}
if(flag==false){
ensurearr_cksNoRepeate(i); //数组里面没有就添加
}
flag = false;
}
alert(arr_cks);
}
}
//鼠标进入和离开触发改变背景函数
function changeBg() {
var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); //这么写是为了让表头不显示背景
// var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
trs[i].onmouseenter = function () {
// trs[i].style.className = "enter"; //错误写法。不需要ing过style对象再获取className
this.className = "enter";
}
trs[i].onmouseleave = function () {
this.className = "leave";
}
}
}
function ckAll() {
document.getElementById("ck_all").onchange = function () {
alert(document.getElementById("ck_all").checked);
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=this.checked;
}
}
}
//检查所有复选框==》得出是否是全选状态
function ckAllCheck(obj) {
var cbs = document.getElementsByClassName("cb");
// alert(cbs.length);
var flag = obj.checked; //获取点下的复选框的状态
var index = 0;
if(flag == false){ //冲数组中除去当前的索引值
for (var i = 0; i < cbs.length; i++) {
if(obj==cbs[i]){
index = i;
}
}
}
alert(index);
arr_cks.splice(index,1);
for(var i=1;i<cbs.length;i++){ //跳过第一个
if(cbs[i].checked==true){
ensurearr_cksNoRepeate(i); //不是add或者appernd方法 ===》要在continue之前进行添加
count++;
}
}
if(count==cbs.length-1){
cbs[0].checked = true;
}else {
cbs[0].checked = false;
}
}
//检查所有复选框是否是全选状态==>每次复选框改变的时候触发
function ckAllCheck02() { //=====》这个方法OK
var cbs = document.getElementsByClassName("cb");
// alert(cbs.length);
var count = 0;
arr_cks = new Array(); //空的数组重新存
for(var i=1;i<cbs.length;i++){ //跳过第一个
if(cbs[i].checked==true){
ensurearr_cksNoRepeate(i); //不是add或者appernd方法 ===》要在continue之前进行添加
count++;
}
}
if(count==cbs.length-1){
cbs[0].checked = true;
}else {
cbs[0].checked = false;
}
}
//检查所有复选框是否是全选状态==》错误写法
function ckAllCheck01() {
var cbs = document.getElementsByClassName("cb");
// alert(cbs.length);
for(var i=1;i<cbs.length;i++){ //跳过第一个
if(cbs[i].checked==false){
cbs[0].checked = false;
return; //break没用吗？ ==》如果有一个false就结束方法的执行
}
if(i<cbs.length-1){
// alert(cbs[i].checked);
// cbs[0].checked = true;
ensurearr_cksNoRepeate(i); //不是add或者appernd方法 ===》要在continue之前进行添加
continue;
// alert(cbs[0].checked);
}
// arr_cks.push(i);
ensurearr_cksNoRepeate(i);
cbs[0].checked = true;
}
}
//保证arr_cks数组没有重复
function ensurearr_cksNoRepeate(index){
for(var i=0;i<arr_cks.length;i++){
if(index==arr_cks[i]){
return; //有了就不添加
}
}
arr_cks.push(index);
}
function deleteRow(obj) {
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
ckAllCheck(); //删除未勾选的，则全选cb被选中
}
</script>
浙公网安备 33010602011771号