可以改变标题宽度的表格（文本表头方式）

最新推荐文章于 2022-07-01 15:53:13 发布

bluedoctor

最新推荐文章于 2022-07-01 15:53:13 发布

阅读量2.3k

点赞数

文章标签： function table javascript border input html

本文链接：https://blog.csdn.net/bluedoctor/article/details/1477334

版权

--------------------------页面代码----------------------------------------

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<base href ="http://localhost/web/Flow/Service/ServicePaperList.aspx">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可以改变行列宽度度的表格</title>
<script language="javascript">
/*
可以改变行列宽度度的表格
bluedoctors@msn.com 2007.01.09
http://www.pwmis.cn/

*/
var oldMouseX=0;//记录上一次鼠标的横向坐标
var oldMouseY=0;//记录上一次鼠标的纵向坐标
var currObjCell=null;//当前单元格

//单元格按下鼠标的函数
function myMouseDown(obj)
{
if(obj.MoveX=="true") obj.style.cursor="w-resize"; else obj.style.cursor="s-resize";
obj.IsMouseDown=true;
oldMouseX=window.event.x;
oldMouseY=window.event.y;
currObjCell=obj;
}

//单元格鼠标移动的函数
function myMouseMove(obj)
{
obj.style.cursor="hand";
if(obj.IsMouseDown)
{
if(obj.MoveX=="true")//横向移动
{
    var oldWidth=parseInt(obj.style.width);
    var newWidth=oldWidth+(window.event.x-oldMouseX);
    if(newWidth>0)
      obj.style.width=newWidth+"px";
    oldMouseX=window.event.x;
    //修改单元格内部的控件样式
    var oTable=obj.parentElement.parentElement;
    var oTr=obj.parentElement;
    var currColIndex=0;
    currColIndex=obj.cellIndex
    /*
    for(var m=0;m<oTr.cells.length;m++)
    {
      if(oTr.cells[m]==obj)
      {
        currColIndex=m;
        //alert(currColIndex);
        break;
      }
    }
    */
    for(var i=1;i<oTable.rows.length;i++)
    {
       if (oTable.rows[i].cells[currColIndex].children.length>0)
         oTable.rows[i].cells[currColIndex].children[0].style.width=obj.style.width;
    }

}
else
{
     var oldHeight=parseInt(obj.style.height);
     var newHeight=oldHeight+(window.event.y-oldMouseY);
     if(newHeight>0)
        obj.style.height=newHeight+"px";
     oldMouseY=window.event.y;
     //修改单元格内部的控件样式
     var oTr=obj.parentElement;
     for(var i=1;i<oTr.cells.length;i++){
       if(oTr.cells[i].children.length>0)
          oTr.cells[i].children[0].style.height=obj.style.height;
     }

}
}

}

//单元格鼠标按键放开的事件函数
function myMouseUp(obj)
{
obj.style.cursor="hand";
obj.IsMouseDown=false;
currObjCell=null;

}

/* 以下函数无需再表格中显式申明下面的事件
οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" MoveX="true"
只需要如下调用即可：
<script language ="javascript">
SMTHead(table2);
< /script>

//单元格鼠标按下事件函数
function myMouseDown2(ObjID)
{
var obj=document.getElementById(ObjID);
myMouseDown(obj);
}

//单元格鼠标移动事件函数
function myMouseMove2()
{
if(currObjCell)
myMouseMove(currObjCell);
}

//单元格鼠标放开事件函数
function myMouseUp2()
{
if(currObjCell)
myMouseUp(currObjCell);
}

//改变表格行列宽函数
function SMTHead(table)
{
//改变列宽
var oTh=table.rows[0];
for(var i=1;i<oTh.cells.length;i++)
{
    var cell=oTh.cells[i];
    cell.id=table.id+"row0cell"+i;
    cell.MoveX="true"; //自定义属性
    cell.style.cursor="hand";
    cell.style.width =cell.clientWidth;
    cell.attachEvent ("onmousedown",new Function("myMouseDown2('"+cell.id+"')"));
    cell.onmousemove =new Function("myMouseMove2()");
    cell.onmouseup   =new Function("myMouseUp2()");
}
//改变行宽
for(var j=0;j<table.rows.length;j++)
{
    var cell=table.rows[j].cells[0];
    cell.id=table.id+"row"+j+"cell0";
    cell.MoveX="false"; //自定义属性
    cell.style.cursor="hand";
    cell.style.height=cell.clientHeight;
    cell.attachEvent ("onmousedown",new Function("myMouseDown2('"+cell.id+"')"));
    cell.onmousemove =new Function("myMouseMove2()");
    cell.onmouseup   =new Function("myMouseUp2()");
}
}

//函数块定义结束

</script>
</head>

<body>
<form name="Form1" >
可以改变标题宽度的表格

（文本表头方式）<p>（显样式申明事件和定义行列宽）</p>

<table border="1" width="67%" bordercolor="#000080" id="table1" bgcolor="#C0C0C0" cellspacing="1" style="border-collapse: collapse">
<tr>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" style="width: 40px; height: 20">　</td>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" MoveX="true" style="width: 74px; height: 20">编号</td>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" MoveX="true" style="width: 126px; height: 20" >业务宗号</td>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" MoveX="true" style="width: 117px; height: 20" >委托人</td>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" MoveX="true" style="width: 176px; height: 20" >房屋座落</td>
</tr>
<tr>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" style="width: 40px; height: 20">　</td>
  <td width="74">1</td>
  <td>
  <a id="dgSVCP__ctl3_aBusinessID" href="../Business/BusinessView.aspx?BussinessID=2006092712008">
  2006092712008</a> </td>
  <td>开发企业(d)</td>
  <td><input type="text" name="T1" size="20" value="四季青5组"></td>
</tr>
<tr>
  <td οnmοusedοwn="myMouseDown(this)" οnmοusemοve="myMouseMove(this)" οnmοuseup="myMouseUp(this)" style="width: 40px; height: 20">　</td>
  <td width="74">2</td>
  <td>
  <a id="dgSVCP__ctl4_aBusinessID" href="../Business/BusinessView.aspx?BussinessID=2006092612004">
  2006092612004</a> </td>
  <td>开发企业(d)</td>
  <td><input type="text" name="T2" size="20" value="四季青5组"></td>
</tr>
</table>
<p>（动态绑定事件和决定行列宽）</p>
<table border="1" width="67%" bordercolor="#000080" id="table2" bgcolor="#C0C0C0" cellspacing="1" style="border-collapse: collapse" >
<tr id="TH1">
  <td id="TD1" width="33" >　</td>
  <td >编号</td>
  <td >业务宗号</td>
  <td >委托人</td>
  <td >房屋座落</td>
</tr>
<tr>
  <td width="33" >　</td>
  <td >1</td>
  <td >
  <a id="dgSVCP__ctl3_aBusinessID0" href="../Business/BusinessView.aspx?BussinessID=2006092712008">
  2006092712008</a> </td>
  <td >开发企业(d)</td>
  <td ><input type="text" name="T3" size="20" value="四季青5组"></td>
</tr>
<tr>
  <td width="33" >　</td>
  <td >2</td>
  <td >
  <a id="dgSVCP__ctl4_aBusinessID0" href="../Business/BusinessView.aspx?BussinessID=2006092612004">
  2006092612004</a> </td>
  <td >开发企业(d)</td>
  <td ><input type="text" name="T4" size="20" value="四季青5组"></td>
</tr>
</table>
<script language ="javascript">
SMTHead(table2);
</script>
</form>
</body>