列表全选，及选中当前行数据变色

Html

Css

序号	测试名称	科目	测试类型	试题数量	创建时间	修改时间
1	测试名称	数学	随堂小测	20	2018-8-9	??
2	测试名称	数学	随堂小测	20	2018-8-9	??
3	测试名称	数学	随堂小测	20	2018-8-9	??

table {
	width:100%;
	border-collapse:collapse;
	font-size:14px;
	padding:5px;
	line-height:30px;
	vertical-align:middle;
	border:1px solid #e7e7e7;
}
.table_div {
	margin-top:15px;
}
.table_div table {
	color:#333;
	font-size:14px;
	border:1px solid #d7d7d7;
}
.table_div table tr:nth-child(even) {
	background:#fbfbfb;
}
.table_div table tr:hover {
	background:#ecfaf8;
}
.table_div table th {
	background:#f2f2f2;
	line-height:40px;
	border:1px solid #d7d7d7;
	text-align:left;
	padding:0 10px;
}
.table_div table td {
	padding:0 10px;
	line-height:40px;
	border:1px solid #d7d7d7;
}
.table_div table .btn_text {
	color:#0e8f7d;
	border:none;
	background:none;
	cursor:pointer;
	margin-right:10px;
}

window.onload = function() {

var checkall = document.getElementById('checkall');
     var checkboxs = document.getElementsByName('selectOption');
     var tbody = document.getElementsByClassName('table_wrap')[0].getElementsByTagName('tbody')[0];
     //单击事件为一个对象，不能是数组
     var oldColor = [];
     var trLength = document.querySelectorAll('.table_wrap tbody tr').length;

for (var i = 0; i < trLength; i++) {
         oldColor.push(getComputedStyle(document.querySelectorAll('.table_wrap tbody tr')[i], null).backgroundColor ? document.querySelectorAll('.table_wrap tbody tr')[i].style.backgroundColor : getComputedStyle(document.querySelectorAll('.table_wrap tbody tr')[i], null).backgroundColor);
     }

tbody.onclick = function() {
         var num = 0;

for (var i = 0; i < trLength; i++) {

if (checkboxs[i].checked) {
                 checkboxs[i].parentNode.parentNode.style.background = '#ecfaf8';
                 num++;

} else {
                 checkboxs[i].parentNode.parentNode.style.background = oldColor[i];
             }
         }
         if (num == trLength) {
             checkall.checked = true; //必须用true与false

} else {
             checkall.checked = false;

}
     }

checkall.onclick = function() {

if (this.checked) {
             for (var i = 0; i < trLength; i++) {
                 checkboxs[i].checked = true;
                 document.querySelectorAll('.table_wrap tbody tr')[i].style.background = '#ecfaf8';
             }
         } else {
             for (var i = 0; i < trLength; i++) {
                 checkboxs[i].checked = false;
                 document.querySelectorAll('.table_wrap tbody tr')[i].style.background = oldColor[i];
             }
         }
     }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

列表全选，及选中当前行数据变色



代码描述：原生全选功能，及选中tr背景变色

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

转角

相关代码

列表全选，及选中当前行数据变色

最新