JavaScript经典案例及代码

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

//页面加载完成后执行
        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";
                }
            }