JS改变表格的列宽

最新推荐文章于 2024-03-08 15:12:18 发布

tnjun123456

最新推荐文章于 2024-03-08 15:12:18 发布

阅读量5.4k

点赞数

分类专栏：前端脚本文章标签： datagrid table generator function html border

前端脚本专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function a()
        {
            e=event.srcElement
            if(e.tagName=="TABLE") return
                    while(e.tagName!="TR")
                    e=e.parentElement
                    if(e.rowIndex==document.getElementById("datagrid1").rows.length-1) return
                    document.getElementById("datagrid1").rows[e.rowIndex+1].style.display=(document.getElementById("datagrid1").rows[e.rowIndex+1].style.display=='none')?'':'none'
        }
    
                 //鼠标拉动列宽
                 function SyDG_moveOnTd(td)
                        {
                            if(event.offsetX>td.offsetWidth-10)
                                td.style.cursor='w-resize';
                            else
                                td.style.cursor='default';
                            if(td.mouseDown!=null && td.mouseDown==true)
                            {
                                if(td.oldWidth+(event.x-td.oldX)>0)
                                    td.width=td.oldWidth+(event.x-td.oldX);
                                td.style.width=td.width;
                                td.style.cursor='w-resize';
                                
                                table=td;
                                while(table.tagName!='TABLE') table=table.parentElement;
                                table.width=td.tableWidth+(td.offsetWidth-td.oldWidth);
                                table.style.width=table.width;
                            }
                        }
                        function SyDG_downOnTd(td)
                        {
                            if(event.offsetX>td.offsetWidth-10)
                            {
                                td.mouseDown=true;
                                td.oldX=event.x;
                                td.oldWidth=td.offsetWidth;
                                table=td;while(table.tagName!='TABLE')table=table.parentElement;
                                td.tableWidth=table.offsetWidth;
                            }
                        }

        </script>
</HEAD>

<BODY>
<TABLE id="element" style="FONT-SIZE: 9pt; BORDER-COLLAPSE: separate" cellSpacing="0" borderColorDark="#ffffff"
            cellPadding="2" width="100%" borderColorLight="#888888" border="1" BorderStyle="None">
            <TBODY>
                <TR align="center" bgColor="#dcdcdc">
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        style="BORDER-RIGHT-COLOR: activeborder" οnmοuseοut="this.mouseDown=false">用户编号</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)" οnmοuseοut="this.mouseDown=false">试用时间</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">转正时间</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">性别</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">姓名拼音</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">生日时间</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">民族</TD>
                    <TD οnmοuseup="this.mouseDown=false" οnmοusemοve="SyDG_moveOnTd(this)" οnmοusedοwn="SyDG_downOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">身高</TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 75px">2000001</TD>
                    <TD>1997-3-13 0:00:00</TD>
                    <TD>1997-3-13 0:00:00</TD>
                    <TD>1</TD>
                    <TD>WZJ</TD>
                    <TD>1965-3-13 0:00:00</TD>
                    <TD>汉</TD>
                    <TD>171</TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 75px">2000045</TD>
                    <TD>2001-2-15 0:00:00</TD>
                    <TD>2001-3-15 0:00:00</TD>
                    <TD>0</TD>
                    <TD>WY</TD>
                    <TD>1978-8-5 0:00:00</TD>
                    <TD>汉</TD>
                    <TD>162</TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 75px">2000046</TD>
                    <TD>2001-2-23 0:00:00</TD>
                    <TD>2001-3-23 0:00:00</TD>
                    <TD>0</TD>
                    <TD>LQ</TD>
                    <TD>2001-2-23 0:00:00</TD>
                    <TD>汉</TD>
                    <TD>171</TD>
                </TR>
            </TBODY>
        </TABLE>
</BODY>
</HTML>

来自： http://www.haogongju.net/art/360025