javascript 拖动表格宽度不用怕滚动条

最新推荐文章于 2021-11-20 16:30:28 发布

给力地板油

最新推荐文章于 2021-11-20 16:30:28 发布

阅读量1.3k

点赞数

分类专栏：技术类文章标签： javascript datagrid table function html border

本文链接：https://blog.csdn.net/wslyy99/article/details/1895846

版权

技术类专栏收录该内容

107 篇文章 0 订阅

订阅专栏

拖动表格宽度不用怕滚动条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖动不用怕滚动条</title>
<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';
}

//功能实现JS
//鼠标拉动列宽
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>
<div align="left" style="width:3000px;">
<TABLE id="element" style="FONT-SIZE: 9pt; BORDER-COLLAPSE: separate" cellSpacing="0" borderColorDark="#ffffff"
            cellPadding="2" borderColorLight="#888888" border="1" BorderStyle="None">

                <TR align="center" bgColor="#dcdcdc">
                <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
      onMouseOut="this.mouseDown=false" style="width:2000px;">扩充距离用的</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
      onMouseOut="this.mouseDown=false" style="BORDER-RIGHT-COLOR: activeborder">用户编号</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
      onMouseOut="this.mouseDown=false">试用时间</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">转正时间</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">性别</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">姓名拼音</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">生日时间</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">民族</TD>
                    <TD onMouseDown="SyDG_downOnTd(this)" onMouseUp="this.mouseDown=false" onMouseMove="SyDG_moveOnTd(this)"
                        οnmοuseοut="this.mouseDown=false">身高</TD>
                </TR>
                <TR>
                  <TD> </TD>
                    <TD>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> </TD>
                    <TD>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> </TD>
                    <TD>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>

        </TABLE>
</div>
</BODY>
</html>

给力地板油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 拖动表格宽度不用怕滚动条

拖动表格宽度不用怕滚动条http://www.w3.org/TR/html4/loose.dtd">拖动不用怕滚动条//暂时作废function a(){ e=event.srcElement; if(e.tagName=="TABLE") return; while(e.tagName!="TR") e=e.parentElement; if(e.rowIndex==documen
复制链接

扫一扫

专栏目录