松鼠的博客

导航

支持ctrl多选行的表格

<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++)
        {
            Rows[i].style.backgroundColor="#EEEEEE"; 
        }
    }
    
    //删除行
    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>&nbsp;</td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>2</td><td>&nbsp;</td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>3</td><td>&nbsp;</td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>4</td><td>&nbsp;</td></tr>
        <tr onclick="onfocusit()" onselectstart="return false"><td>5</td><td>&nbsp;</td></tr>
    </table>

posted on 2008-06-18 12:56  Xproer-松鼠  阅读(525)  评论(0)    收藏  举报