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

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

(显样式申明事件和定义行列宽)

 编号业务宗号委托人房屋座落
 12006092712008 开发企业(d)
 22006092612004 开发企业(d)

(动态绑定事件和决定行列宽)

 编号业务宗号委托人房屋座落
 12006092712008 开发企业(d)
 22006092612004 开发企业(d)
<script language="javascript" type="text/javascript"> SMTHead(table2); </script>

 

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

<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>

</html>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值