点击表格行变色，checkbox自动选中(兼容IE和FF)

最新推荐文章于 2021-08-04 00:53:46 发布
一把编程的菜刀
最新推荐文章于 2021-08-04 00:53:46 发布
阅读量4.6k
点赞数
分类专栏： js 文章标签： ie javascript 存储 function
本文链接：https://blog.csdn.net/chinmo/article/details/3174268
版权
js 专栏收录该内容
32 篇文章 0 订阅
订阅专栏
 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击表格行，checkbox自动选中(兼容IE和FF) </title>
<script>
window.onerror = function(sMessage, sUrl, sLine){ //捕捉错误
alert(sMessage + "---------" + sUrl + "-----------" + sLine); 
return true; 
} 
</script>
<script language="JavaScript">
<!--
    var Rows = new Array(); //所有选中的行对象
    var cols = new Array();//所有选中的列对象
    var ShiftStartRow = ""; //Shift多选时存储开始行对象
    
    //选行主函数
    function onfocusit(e)
    {
        var ee=e||window.event;//区别FF和IE
        var iRow = e.target || window.event.srcElement;//区别FF和IE
        do
        {
            iRowiRow=iRow.parentNode;//为了兼容FF和IE，所以用parentNode而不用parentElement
        }while(iRow.tagName!='TR')//选择行的父节点
        //Ctrl多选
        if(e.ctrlKey)//当按下ctrl键时执行
        {
            var j=-1;
            for(i=0;i<Rows.length;i++)//
            {
                if(iRow==Rows[i])//连续点击某一行多次执行该语句
                {
                    j=i;//连续点击某一行后改变j的值，这里值为0
                    break;
                }
            }
            if(j!=-1)//连续点击某行后执行
            {
                for(i=j;i<Rows.length-1;i++)//这里为什么减一行呢？因为我们实际才用到5行，而总行数是6，也就是只循环5次
                {
                    Rows[i]=Rows[i+1];//由于j=0的，而我们的有效行数是从1开始的，故而+1
                }
                RowsRows.length=Rows.length-1;//重新定义行的总数
            }
            else//没有连续点击某行执行
            {
            
                Rows[Rows.length]=iRow;//记录最后一次点击的行
            }
            ShiftStartRow=iRow;//记录Shift多选时存储开始行对象
        }
        //Shift多选
        else if(e.shiftKey)//当按下shift键时执行
        {
            if(ShiftStartRow!="")//这个是区分是否执行过ctrl键，如执行过就执行该语句
            {
                var StartIndex=ShiftStartRow.rowIndex;//记录shift开始行对象，即ctrl键最后一次点击的行
                var EndIndex=iRow.rowIndex;//记录shift结束行对象，即鼠标点击当前行
                var oTable=iRow.parentNode;//记录当前行号的父节点
                Rows.length=0;//初始化行数
                if(StartIndex < EndIndex)//当开始行行号小于结束行行号执行该语句
                {
                    for(var i=StartIndex;i<EndIndex+1;i++)
                    {
                        Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
                    }
                }
                if(StartIndex>= EndIndex)//当开始行行号大于或等于结束行行号执行该语句
                {
                    for(var i=EndIndex;i<StartIndex+1;i++)
                    {
                        Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
                    } 
                }
            }
        }
        else//没有执行过ctrl键，执行该语句
        {
            Rows.length=1;//初始化行数
            Rows[0]=iRow;//把点击当前行作为第一行，以作为连续按shift键使用
            ShiftStartRow=iRow;//记录Shift多选时存储开始行对象，以作为连续按shift键使用
        }
        changeColor(iRow);//执行选中行变色函数
        
    }
    
    //选中行变色
    function changeColor(E)
    { 
        for(var i=1;i<E.parentNode.rows.length;i++)//根据当前行的父节点的总行数循环
        {  
            cols= E.parentNode.rows[i].getElementsByTagName('td');//记录行的列数
            if(E!=E.parentNode.rows[i]){//判断是否为当前行，如果不是执行该语句
            
                    E.parentNode.rows[i].style.backgroundColor="#FFFFFF";//不是当前行的颜色为白色
                    cols[1].childNodes[0].checked=false;//取消不是当前行的复选框的选种状态
            }
        }
        for(i=0;i<Rows.length;i++)
        {
            cols= Rows[i].getElementsByTagName('td');//记录行的列数
            if(cols[1].childNodes[0].checked){//复选框为选中状态执行该语句
                Rows[i].style.backgroundColor="#FFFFFF"; 
                cols[1].childNodes[0].checked=false;
            }
            else{//复选框为非选中状态执行该语句
                Rows[i].style.backgroundColor="#EEEEEE"; 
                cols[1].childNodes[0].checked=true;
            }
        }
    }
    
   
    
    function returnfalse()
    {
        return false;
    }
  //-->
</script>
</head>
<body>
    注意：单击选择行，支持Ctrl、Shift键盘操作
    <table border="1" width="100%">
    <tr><td colspan="2" onselectstart="return false">-------------</td></tr>
        <tr onclick="onfocusit(event)" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit(event)" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit(event)" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit(event)" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit(event)" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
    </table>
</body>
</html>
 
 