js学习代码二

一、表格全选和全不选（表格）

//页面加载完成后执行
window.onload = function () {
//获取第一个复选框
var firstCb = document.getElementById("firstCb");
//绑定单击事件事件
firstCb.onclick = function () {
//获取所有的复选框
var cbs = document.getElementsByName("cb");
//遍历数组
for(var i=0;i<cbs.length;i++){
cbs[i].checked = firstCb.checked;
}
}

**注：表格中必须有一列是复选框

二、表格全选和全不选（按钮）

*1.表格全选

//获取全选按钮对象并绑定单击事件
document.getElementById("selectAll").onclick = function () {
//遍历checkbox对象数组
for (var i =0;i<cbs.length;i++){
//设置所有的checkbox的状态true
cbs[i].checked = true;
}
}

*2表格全不选

//获取全不选按钮对象并绑定单击事件
document.getElementById(“unSelectAll”).onclick = function () {
//遍历checkbox对象数组
for (var i =0;i<cbs.length;i++){
//设置所有的checkbox的状态为false
cbs[i].checked = false;
}
}

三、删除条目时用到的用户友好提示信息

function delUser(id) {
//用户安全提示
if(confirm("确定要删除吗？")){
//跳转到要访问路径
location.href = "${pageContext.request.contextPath}/user/deleteUser/"+id;
}
}

四、为表格添加行颜色事件

//获取所有行的对象
var trs = document.getElementsByTagName("tr");
//遍历tr数组
for(var i=0;i<trs.length;i++){
trs[i].onmouseover = function() {
this.className = "over";
}
trs[i].onmouseout = function() {
this.className = "out";
}
}