点击表格行，checkbox自动选中的问题

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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>无标题文档</title>
</head><body>
<script language="JavaScript">
<!--
    var Rows = new Array(); //所有选中的行对象
    var ShiftStartRow = ""; //Shift多选时存储开始行对象
    
    //选行主函数
    function onfocusit()
    {
        iRow=window.event.srcElement;
        do
        {
            iRow=iRow.parentElement;
        }while(iRow.tagName!='TR')
        //Ctrl多选
        if(event.ctrlKey)
        {
            var j=-1;
            for(i=0;i<Rows.length;i++)
            {
                if(iRow==Rows[i])
                {
                    j=i;
                    break;
                }
            }
            if(j!=-1)
            {
                for(i=j;i<Rows.length-1;i++)
                {
                    Rows[i]=Rows[i+1];
                }
                Rows.length=Rows.length-1;
            }
            else
            {
                Rows[Rows.length]=iRow;
            }
            ShiftStartRow=iRow;
        }//Shift多选
        else if(event.shiftKey)
        {
            if(ShiftStartRow!="")
            {
                var StartIndex=ShiftStartRow.rowIndex;
                var EndIndex=iRow.rowIndex;
                var oTable=iRow.parentElement;
                Rows.length=0;
                if(StartIndex < EndIndex)
                {
                    for(var i=StartIndex;i<EndIndex+1;i++)
                    {
                        Rows.push(oTable.rows[i]);
                    }
                }
                if(StartIndex >= EndIndex)
                {
                    for(var i=EndIndex;i<StartIndex+1;i++)
                    {
                        Rows.push(oTable.rows[i]);
                    } 
                }
            }
        }
        else
        {
            Rows.length=1;
            Rows[0]=iRow;
            ShiftStartRow=iRow;
        }
        changeColor(iRow); 
    }
    
    //选中行变色
    function changeColor(E)
    {
        for(var i=1;i<E.parentElement.rows.length;i++)
        {
            E.parentElement.rows(i).style.backgroundColor="#FFFFFF";
        }
        for(i=0;i<Rows.length;i++)
        {
var cols= Rows[i].getElementsByTagName('td');
            Rows[i].style.backgroundColor="#EEEEEE"; 
cols[1].childNodes[0].checked=true;
        }
    }
    
    //删除行
    function DeleteRow()
    {
        if(Rows.length==0)
        {
            alert("请选择要删除的行!");
            return false;
        }
        for(i=0;i<Rows.length;i++)
        {
            Rows[i].parentElement.deleteRow(Rows[i].rowIndex)
        }
        Rows.length=0;
    }
    
    //复制行
    function CopyRow()
    {
        if(Rows.length==0)
        {
            alert("请选择要复制的部件！");
            return false;
        }
        
        for(i=0;i<Rows.length;i++)
        {
            oTable=Rows[i].parentElement;
            iRowIndex=Rows[i].rowIndex;
            oRow=oTable.insertRow(iRowIndex+1);
            oRow.attachEvent("onclick",onfocusit);
            oRow.attachEvent("onselectstart",returnfalse);
            oRow.align=Rows[i].align;            for(var j=0;j<oTable.rows(iRowIndex).cells.length;j++)
            {
                oTable.rows(iRowIndex+1).insertCell(j);
                oTable.rows(iRowIndex+1).cells(j).innerHTML=oTable.rows(iRowIndex).cells(j).innerHTML;
                oTable.rows(iRowIndex+1).cells(j).align=oTable.rows(iRowIndex).cells(j).align;
            }
        }
    }
    
    function returnfalse()
    {
        return false;
    }
  //-->
</script></head>
<body>
    <input type="button" value="删除" onclick="DeleteRow()">
    <input type="button" value="复制" onclick="CopyRow()">
    注意：单击选择行，支持Ctrl、Shift键盘操作
    <table border="1" width="100%">
        <tr onclick="onfocusit()" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
    </table>
</body>
</html>

解决方案 »

  1.   

    上面的稍微改一下：
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
    <!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>无标题文档</title>
    </head><body>
    <script language="JavaScript">
    <!--
        var Rows = new Array(); //所有选中的行对象
    var cols = new Array();//所有选中的列对象
        var ShiftStartRow = ""; //Shift多选时存储开始行对象
        
        //选行主函数
        function onfocusit()
        {
            iRow=window.event.srcElement;
            do
            {
                iRow=iRow.parentElement;
            }while(iRow.tagName!='TR')
            //Ctrl多选
            if(event.ctrlKey)
            {
                var j=-1;
                for(i=0;i<Rows.length;i++)
                {
                    if(iRow==Rows[i])
                    {
                        j=i;
                        break;
                    }
                }
                if(j!=-1)
                {
                    for(i=j;i<Rows.length-1;i++)
                    {
                        Rows[i]=Rows[i+1];
                    }
                    Rows.length=Rows.length-1;
                }
                else
                {
                    Rows[Rows.length]=iRow;
                }
                ShiftStartRow=iRow;
            }//Shift多选
            else if(event.shiftKey)
            {
                if(ShiftStartRow!="")
                {
                    var StartIndex=ShiftStartRow.rowIndex;
                    var EndIndex=iRow.rowIndex;
                    var oTable=iRow.parentElement;
                    Rows.length=0;
                    if(StartIndex < EndIndex)
                    {
                        for(var i=StartIndex;i<EndIndex+1;i++)
                        {
                            Rows.push(oTable.rows[i]);
                        }
                    }
                    if(StartIndex >= EndIndex)
                    {
                        for(var i=EndIndex;i<StartIndex+1;i++)
                        {
                            Rows.push(oTable.rows[i]);
                        } 
                    }
                }
            }
            else
            {
                Rows.length=1;
                Rows[0]=iRow;
                ShiftStartRow=iRow;
            }
            changeColor(iRow); 
        }
        
        //选中行变色
        function changeColor(E)
        {
            for(var i=1;i<E.parentElement.rows.length;i++)
            {  cols= E.parentElement.rows(i).getElementsByTagName('td');
                E.parentElement.rows(i).style.backgroundColor="#FFFFFF";
    cols[1].childNodes[0].checked=false;//取消checkbox选择
            }
            for(i=0;i<Rows.length;i++)
            {
    cols= Rows[i].getElementsByTagName('td');
                Rows[i].style.backgroundColor="#EEEEEE"; //选中当前的行变色
    cols[1].childNodes[0].checked=true;//checkbox选中
            }
        }
        
        //删除行
        function DeleteRow()
        {
            if(Rows.length==0)
            {
                alert("请选择要删除的行!");
                return false;
            }
            for(i=0;i<Rows.length;i++)
            {
                Rows[i].parentElement.deleteRow(Rows[i].rowIndex)
            }
            Rows.length=0;
        }
        
        //复制行
        function CopyRow()
        {
            if(Rows.length==0)
            {
                alert("请选择要复制的部件！");
                return false;
            }
            
            for(i=0;i<Rows.length;i++)
            {
                oTable=Rows[i].parentElement;
                iRowIndex=Rows[i].rowIndex;
                oRow=oTable.insertRow(iRowIndex+1);
                oRow.attachEvent("onclick",onfocusit);
                oRow.attachEvent("onselectstart",returnfalse);
                oRow.align=Rows[i].align;            for(var j=0;j<oTable.rows(iRowIndex).cells.length;j++)
                {
                    oTable.rows(iRowIndex+1).insertCell(j);
                    oTable.rows(iRowIndex+1).cells(j).innerHTML=oTable.rows(iRowIndex).cells(j).innerHTML;
                    oTable.rows(iRowIndex+1).cells(j).align=oTable.rows(iRowIndex).cells(j).align;
                }
            }
        }
        
        function returnfalse()
        {
            return false;
        }
      //-->
    </script></head>
    <body>
        <input type="button" value="删除" onclick="DeleteRow()">
        <input type="button" value="复制" onclick="CopyRow()">
        注意：单击选择行，支持Ctrl、Shift键盘操作
        <table border="1" width="100%">
    <tr><td colspan="2" onselectstart="return false">-------------</td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
        </table>
    </body>
    </html>
      

  2.   

    在表格上增加onclick事件 就解决了。。
      

  3.   

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
    <!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>无标题文档</title>
    </head><body>
    <script language="JavaScript">
    <!--
        var Rows = new Array(); //所有选中的行对象
    var cols = new Array();//所有选中的列对象
        var ShiftStartRow = ""; //Shift多选时存储开始行对象
        
        //选行主函数
        function onfocusit()
        {
            iRow=window.event.srcElement;
            do
            {
                iRow=iRow.parentElement;
            }while(iRow.tagName!='TR')
            //Ctrl多选
            if(event.ctrlKey)
            {
                var j=-1;
                for(i=0;i<Rows.length;i++)
                {
                    if(iRow==Rows[i])
                    {
                        j=i;
                        break;
                    }
                }
                if(j!=-1)
                {
                    for(i=j;i<Rows.length-1;i++)
                    {
                        Rows[i]=Rows[i+1];
                    }
                    Rows.length=Rows.length-1;
                }
                else
                {
                    Rows[Rows.length]=iRow;
                }
                ShiftStartRow=iRow;
            }//Shift多选
            else if(event.shiftKey)
            {
                if(ShiftStartRow!="")
                {
                    var StartIndex=ShiftStartRow.rowIndex;
                    var EndIndex=iRow.rowIndex;
                    var oTable=iRow.parentElement;
                    Rows.length=0;
                    if(StartIndex < EndIndex)
                    {
                        for(var i=StartIndex;i<EndIndex+1;i++)
                        {
                            Rows.push(oTable.rows[i]);
                        }
                    }
                    if(StartIndex >= EndIndex)
                    {
                        for(var i=EndIndex;i<StartIndex+1;i++)
                        {
                            Rows.push(oTable.rows[i]);
                        } 
                    }
                }
            }
            else
            {
                Rows.length=1;
                Rows[0]=iRow;
                ShiftStartRow=iRow;
            }
            changeColor(iRow); 
        }
        
        //选中行变色
        function changeColor(E)
        { 
            for(var i=1;i<E.parentElement.rows.length;i++)
            {  if(E!=E.parentElement.rows(i)){
    cols= E.parentElement.rows(i).getElementsByTagName('td');
                E.parentElement.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 DeleteRow()
        {
            if(Rows.length==0)
            {
                alert("请选择要删除的行!");
                return false;
            }
            for(i=0;i<Rows.length;i++)
            {
                Rows[i].parentElement.deleteRow(Rows[i].rowIndex)
            }
            Rows.length=0;
        }
        
        //复制行
        function CopyRow()
        {
            if(Rows.length==0)
            {
                alert("请选择要复制的部件！");
                return false;
            }
            
            for(i=0;i<Rows.length;i++)
            {
                oTable=Rows[i].parentElement;
                iRowIndex=Rows[i].rowIndex;
                oRow=oTable.insertRow(iRowIndex+1);
                oRow.attachEvent("onclick",onfocusit);
                oRow.attachEvent("onselectstart",returnfalse);
                oRow.align=Rows[i].align;            for(var j=0;j<oTable.rows(iRowIndex).cells.length;j++)
                {
                    oTable.rows(iRowIndex+1).insertCell(j);
                    oTable.rows(iRowIndex+1).cells(j).innerHTML=oTable.rows(iRowIndex).cells(j).innerHTML;
                    oTable.rows(iRowIndex+1).cells(j).align=oTable.rows(iRowIndex).cells(j).align;
                }
            }
        }
        
        function returnfalse()
        {
            return false;
        }
      //-->
    </script></head>
    <body>
        <input type="button" value="删除" onclick="DeleteRow()">
        <input type="button" value="复制" onclick="CopyRow()">
        注意：单击选择行，支持Ctrl、Shift键盘操作
        <table border="1" width="100%">
    <tr><td colspan="2" onselectstart="return false">-------------</td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
            <tr onclick="onfocusit()" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
        </table>
    </body>
    </html>加了一个再次点击该行，checkbox取消勾选功能
      

  4.   

    自己改去吧，头疼，写这个东西我注释一下你自己改：//选中行变色
        function changeColor(E)
        { 
            for(var i=1;i<E.parentElement.rows.length;i++)
            {  
    cols= E.parentElement.rows(i).getElementsByTagName('td');
    if(E!=E.parentElement.rows(i)){//判断是否为当前行

    if(ctrlShift==0){//判断是否曾经用过ctrl或Shift
    E.parentElement.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;
    }
            }
        }
        
       
      

  5.   

    else if(event.shiftKey)和 if(event.ctrlKey)
    在FF下主要这2个的判断，做一下这2个的兼容，基本就兼容了
    自己改去吧下次有点诚意，不然没人光顾你的，问这种少有多种效果的，要弄个100-300分的，肯定N多人来