100分求一个通过鼠标拖动改变表格宽度的代码

<p id="p1">
<table id="table1" border="1" width="100%">
<tr>
<td id="td1">dfsdf
</td>
<td>dffdgsdf
</td>
</tr>
<tr>
<td>dfsdf
</td>
<td>dffdgsdf
</td>
</tr>
</table>
</p><table id="table1" border="1" width="100%">
<tr>
<td id="td1">dfsdf
</td>
<td>dffdgsdf
</td>
</tr>
<tr>
<td>dfsdf
</td>
<td>dffdgsdf
</td>
</tr>
</table>
<input name=haha type=button value="按" onclick=edit()>
<script language=javascript>
function edit()
{
var a=document.getElementById("p1").isContentEditable
var haha=!a
document.getElementById("p1").contentEditable=haha;
}
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.stedy.com/2k3Widgets/2k3Grid/2k3Grid.htm
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="image_index" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Vine Index</title>
    <link href="daricwoo.css" type="text/css" rel="stylesheet" />
    <script language="javascript" type="text/javascript">
      self.moveTo(screen.availLeft,screen.availTop);
      self.resizeTo(screen.availWidth,screen.availHeight);
      var orgX,orgY;

      //----------------------------------------------------
      //rcpt: action recieptor
      //ornt: orient of action
      //incr: action incrimination
      //----------------------------------------------------
      function split(rcpt,ornt,incr)
      {
var elmRcpt=document.getElementById(rcpt);
var elmIncr=document.getElementById(incr);
var intWdth=parseInt(elmRcpt.children(0).clientWidth);
var intHght=parseInt(elmRcpt.children(0).clientHeight);
if (elmRcpt.style.display=="none")
{
if (ornt==0)
{
elmIncr.width=parseInt(elmIncr.width)-intWdth;
}
else
{
elmIncr.height=parseInt(elmIncr.height)-intHght;
}
elmRcpt.style.display="block";
}
else
{
elmRcpt.style.display="none";
if (ornt==0)
{
elmIncr.width=parseInt(elmIncr.width)+intWdth;
}
else
{
elmIncr.height=parseInt(elmIncr.height)+intHght;
}
}
      }

      function beginResize()
      {
orgX=event.x;
orgY=event.y;
      }

      //---------------------------------------------------
      //rcpt: action recieptor
      //ornt: orient of action
      //incr: action incrimination
      //minValue: minimum value of incrimination height(or width) property
      //---------------------------------------------------
      function endResize(rcpt,ornt,incr,minValue)
      {
var elmRcpt=document.getElementById(rcpt);
var elmIncr=document.getElementById(incr);
var intWdth=parseInt(elmRcpt.clientWidth);
var intHght=parseInt(elmRcpt.clientHeight);
var intWdCh=event.x-orgX;
var intHgCh=event.y-orgY;
if (ornt==0)
{
if (intWdCh>parseInt(elmIncr.width))
  intWdCh=parseInt(elmIncr.width)-1;
if ((intWdth+intWdCh)<minValue)
{
elmRcpt.width=minValue;
}
else
{
elmRcpt.width=parseInt(elmRcpt.width)+intWdCh;
}
elmIncr.width=parseInt(elmIncr.width)+intWdth-parseInt(elmRcpt.width)
}
else
{
if (intHgCh>parseInt(elmIncr.height))
  intHgCh=parseInt(elmIncr.height)-1;
if ((intHght+intHgCh)<minValue)
{
elmRcpt.height=minValue;
}
else
{
elmRcpt.height=parseInt(elmRcpt.height)+intHgCh;
}
elmIncr.height=parseInt(elmIncr.height)+intHght-parseInt(elmRcpt.height);
}
      }
</script>
</head>
<body>
  <form id="frmIndex" runat="server">
    <div>
<table id="tblMain" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td>
<div id="divTop">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="tdTop" height="60" bgcolor="yellow"> </td>
</tr>
<tr>
<td height="12" bgcolor="lightblue"> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="8" align="center">
<img src="image/splith.gif" onclick="split('divTop',1,'ttdPgtb');" ondragstart="beginResize();" ondragend="endResize('tdTop',1,'ttdPgtb',20);" /></td>
</tr>
<tr>
<td valign="top">
<table id="tblBody" width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td height="100%" valign="top">
<div id="divLeft">
<table id="tblLeft" border="0" cellpadding="0" cellspacing="0" width="142">
<tr>
<td height="24" bgcolor="#ffcc33"></td>
</tr>
</table>
</div>
</td>
<td id="tdMdl" height="100%" style="width: 8px">
<img src="image/splitv.gif" onclick="split('divLeft',0,'tblPage');" ondragstart="beginResize();" ondragend="endResize('tblLeft',0,'tblPage',20);" />
</td>
<td height="100%" valign="top">
<table id="tblPage" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td id="ttdPgtb" height="24"> 
</td>
</tr>
<tr>
<td bgcolor="#e0e0e2" height="200">
</td>
</tr>
<tr>
<td> 
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
    </div>
  </form>
</body>
</html>
下面的代码在IE6.0下调试过了，应该是你想要的效果吧
<script language="javascript"> var colnum=0;
var begin_x;
var begin_y;
var drag_flag = false;
document.onmousedown = mouseDragBegin
document.onmousemove = mouseDrag
document.onmouseup = mouseDragEnd

function setDrag(col){
drag_flag = true;
colnum = col;
}

function mouseDragBegin(){
if(drag_flag==true){
begin_x = event.x;
begin_y = event.y;
}
}function mouseDrag(){
if(drag_flag==true){
if (window.event.button == 1){
var now_x = event.x;
var now_y = event.y;
if(colnum==0){
var value = ColRight1[0].style.pixelWidth + now_x - begin_x;
  for(var i=0;i<ColRight1.length;i++){
ColRight1[i].style.pixelWidth = value;
  }
  if (ColRight1[0].style.pixelWidth <=10){
for (var i=0;i<ColRight1.length;i++){
ColRight1[i].style.pixelWidth = 10;
}
  }

  begin_x = now_x;

}else if(colnum==1){
var value = ColRight2[0].style.pixelWidth + now_x - begin_x;
  for(var i=0;i<ColRight1.length;i++){
ColRight2[i].style.pixelWidth = value;
  }
  if (ColRight2[0].style.pixelWidth <=10){
for (var i=0;i<ColRight2.length;i++){
ColRight2[i].style.pixelWidth = 10;
}
  }
  begin_x = now_x;

}else if(colnum==2){
var value = ColRight3[0].style.pixelWidth + now_x - begin_x;
for(var i=0;i<ColRight1.length;i++){
ColRight3[i].style.pixelWidth = value;
}
if (ColRight3[0].style.pixelWidth <=10){
for (var i=0;i<ColRight3.length;i++){
ColRight3[i].style.pixelWidth = 10;
}
}
begin_x = now_x;

}else if(colnum==3){
var value = ColRight4[0].style.pixelWidth + now_x - begin_x;
for(var i=0;i<ColRight1.length;i++){
ColRight4[i].style.pixelWidth = value;
}
if (ColRight4[0].style.pixelWidth <=10){
for (var i=0;i<ColRight4.length;i++){
ColRight4[i].style.pixelWidth = 10;
}
}
begin_x = now_x;

}
}
}
}
function mouseDragEnd(){
drag_flag=false;
}
//-->
</script> <TABLE ID="tblTitle" BORDER=0 cellspacing =0 cellpadding =0 STYLE="border-collapse:collapse;">
          <tr height = 30>
                  <td class="tdTitle"><DIV ID=ColRight1 style="width:100px; background-color:red" unselectable="on" onMouseDown="setDrag(0)">000</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight2 style="width:100px; background-color:green" unselectable="on" onMouseDown="setDrag(1)">111</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight3 style="width:120px; background-color:red" unselectable="on" onMouseDown="setDrag(2)">222</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight4 style="width: 50px; background-color:green" unselectable="on" onMouseDown="setDrag(3)">333</DIV></td>
          </tr>
          <tr height = 30>
                  <td class="tdTitle"><DIV ID=ColRight1 style="width:100px; background-color:red" unselectable="on" onMouseDown="setDrag(0)">000</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight2 style="width:100px; background-color:green" unselectable="on" onMouseDown="setDrag(1)">111</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight3 style="width:120px; background-color:red" unselectable="on" onMouseDown="setDrag(2)">222</DIV></td>
                  <td class="tdTitle"><DIV ID=ColRight4 style="width: 50px; background-color:green" unselectable="on" onMouseDown="setDrag(3)">333</DIV></td>
          </tr>
  </TABLE>

100分求一个 通过鼠标拖动改变表格宽度的代码

解决方案 »

100分求一个通过鼠标拖动改变表格宽度的代码