怎样用鼠标动态更改table中行的行高，table总高度不变，调整相邻行高度大小?

只看过别人用div实现过类似的效果，关注！

解决方案 »

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

to  HHH3000(蓝色爱琴海) :
    能提供相关的代码吗？
  谢谢！
我知道sohu校友录里面可以实现鼠标滑动图片大小变化,你可以把那个脚本下下来,改一下试试.我自己只试过让图片大小变化的,没有试过让表格变化的
to zwhe() :
    不好意思，我这个只是改变相邻两列宽度的例子，你看看吧，希望对你有帮助！（转自篮丽技术论坛）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>llrock </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*-----------------------------------
    by llrock,7/12/2002
------------------------------------*//***************** check brower **********************/
function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
this.ver=navigator.appVersion;
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.win = (navigator.appVersion.indexOf("Win")>0);
  this.xwin = (navigator.appVersion.indexOf("X11")>0);
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom||false);
  this.width = null;
  this.height = null;
return this
}
var bw = new lib_bwcheck();
/****************** class ********************/
function TExcel(name){
  this.name=name;
  this.records=new Array();
  this.fields=new Array();
  this.fields[0]=new TExcelItem(this,'field_0_0','序号',0,0,40,'#097EBD','#FFFFFF');
  this.records[0]=new Array();
  this.records[0][0]=this.fields[0];
  this.VResizer=new Array();

//default style...
this.width=80;
this.height=20;
this.bgcolor='#f7f7f7';  this.makeCode=makeCode;
  this.makeStyle=makeStyle;
  this.getObj=getObj;
  this.resizeToW=resizeToW;
  this.arrange=arrange;
  this.addField=addField;
  this.addRecord=addRecord;
}
function TExcelItem(owner,name,content,rID,fID,width,bgc,ftc){//type:row||col
  this.owner=owner;
  this.name=name;
  this.content=content;
  this.rID=rID;
  this.fID=fID;
  //default style...
this.width=width||owner.width;
this.height=owner.height;
this.bgcolor=bgc||owner.bgcolor;
this.fontcolor=ftc||'#000000';
  this.getObj=item_getObj;
  this.makeStyle=item_makeStyle;
  this.makeCode=item_makeCode;
}
/********************** method ************************/
function item_makeStyle(){
this.csscode='position:absolute;width:'+this.owner.fields[this.fID].width+'px;height:'+this.height+'px;left:1px;top:0px;background-color:'+this.bgcolor+';overflow:hidden;z-index:10;font-family:tahoma, arial,helvetica;font-size:12px;color:'+this.fontcolor;
}
function item_makeCode(){
  if(this.rID==0)this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" ><center><b>'+this.content+'</b></center></div>';
else this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" CONTENTEDITABLE="true" cursor="text">'+this.content+'</div>';//如果你不希望用户可以修改信息把ContentEditable设为false
}
function item_getObj(){
  this.body=new makeLayer(this.name);
  this.body.width=this.width;
  this.body.height=this.height;
}
function makeCode(){
  this.htmlcode='';
  for(i=0;i<this.records.length;i++)
    for(j=0;j<this.fields.length;j++){
    this.records[i][j].makeCode()
     this.htmlcode+=this.records[i][j].htmlcode;
  }
  for(i=0;i<(this.fields.length-1);i++)
    this.htmlcode+='\n<div id="VResizer_'+i+'" style="position:absolute;width:1px;height:100%;top:0px;background-color:black;cursor:crosshair;z-index:15;overflow:hidden;" ></div>';
    this.htmlcode='<div id=panel style="position:absolute;background-color:black;width:330px;height:200px;left:50px;top:100px;overflow:hidden;">'+this.htmlcode+'</div>'
  }
function makeStyle(){
  this.csscode='';
  for(i=0;i<this.records.length;i++)
    for(j=0;j<this.fields.length;j++){
    this.records[i][j].makeStyle()
     this.csscode+=this.records[i][j].csscode;
  }
}
function getObj(){
  for(i=0;i<this.records.length;i++)
    for(j=0;j<this.fields.length;j++){
      this.records[i][j].getObj();
    }
for(i=0;i<(this.fields.length-1);i++)
   this.VResizer[this.VResizer.length]=new makeLayer('VResizer_'+i);
}
function arrange(){
  var pw=0
  for(j=0;j<this.fields.length;j++){
    this.fields[j].x=j==0?1:(this.fields[j-1].x+this.fields[j-1].width+1);
if(j!=(this.fields.length-1))this.VResizer[j].moveTo((this.fields[j].x+this.fields[j].width),0);
    pw+=1+this.fields[j].width;
for(i=0;i<this.records.length;i++){
   var y=i*21+this.records[i][j].body.x;
      this.records[i][j].body.moveTo(this.fields[j].x,y)
    }
}
  document.all.panel.style.width=pw+1;
  document.all.panel.style.height=21*this.records.length+1}
function addField(){
  var arg=this.addField.arguments;
  var len=arg.length;
// this.records[0]=new Array();
  var rID=0;
  this.records[0][0]=new TExcelItem(this,'field_0_0','',0,0);
  for(i=0;i<len;i++){
   var fID=this.fields.length;
this.fields[fID]=new TExcelItem(this,('field_'+rID+'_'+fID),(arg[i]==''?('unName_'+rID+'_'+fID):arg[i]),rID,fID,100,'#0099FF','#FFFFFF');
this.records[0][this.records[0].length]=this.fields[fID];
  }
}
function addRecord(){
  var arg=this.addRecord.arguments;
  var rID=this.records.length;
  this.records[rID]=new Array();
  this.records[rID][0]=new TExcelItem(this,('item_'+rID+'_0'),rID,rID,0);
  for(i=1;i<this.fields.length;i++){
    this.records[rID][i]=new TExcelItem(this,('item_'+rID+'_'+i),(!arg[i-1]?'':arg[i-1]),rID,i);
  }
// alert(this.fields.length)
}
/***************** drag function *****************************/
function resizeToW(w){
  for(i=0;i<this.records.length;i++){
    this.records[i][dragID].body.css.width=w;
  this.records[i][dragID+1].body.css.width=allw-w;
  this.VResizer[dragID].moveTo(w+ oExcel.records[0][dragID].body.obj.offsetLeft,0);
  this.records[i][dragID+1].body.moveTo(this.VResizer[dragID].obj.offsetLeft+1,0);
  }
}
var dragObj=null;
var dragID=null;
var allw,maxw,x1,x2
function mDown(){
  if(window.event.srcElement.id.indexOf('VResizer_')!=-1)dragObj=window.event.srcElement;
  else return false;
  document.body.style.cursor='crosshair';
  dragID=parseInt(dragObj.id.replace(/\w+\_(\d*)/,'$1'));
  allw=oExcel.records[0][dragID].body.obj.clientWidth+oExcel.records[0][dragID+1].body.obj.clientWidth;
  maxw=allw-20;
  x1=oExcel.records[0][dragID].body.obj.offsetLeft+20+document.all.panel.offsetLeft;
  x2=oExcel.records[0][dragID+1].body.obj.offsetLeft+document.all.panel.offsetLeft+oExcel.records[0][dragID+1].body.obj.clientWidth-20;
  return false
}
接上面，统一写到一个页面：
function mMove(){
  if(!dragObj||!dragID) return false;
  if(window.event.x<=x1) return oExcel.resizeToW(20);
  if(window.event.x>=x2) return oExcel.resizeToW(maxw);
  var w=window.event.x-document.all.panel.offsetLeft-oExcel.records[0][dragID].body.obj.offsetLeft//-window.event.offsetX;
  return oExcel.resizeToW(w)}
function mUp(){
  document.body.style.cursor='default';
  dragObj=null;
  dragID=null;
  return false
}
function dragInit(){
if (bw.ns) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}else{
  document.onmousedown = mDown
  document.onmousemove = mMove
  document.onmouseup = mUp;
}
}
/************* layer function ******************/
function makeLayer( idStr ) {
this.idStr = idStr;
if(bw.ns4)this.obj=document.layers[idStr];
else if (bw.ns6) this.obj = document.getElementById(idStr);
else this.obj=eval('document.all.'+idStr);
if (bw.ns6) this.css=this.obj.style;
else if (bw.ns) this.css=this.obj;
else this.css=this.obj.style;
this.x = getLayerX(this.idStr);
this.y = getLayerY(this.idStr);
this.moveTo=lib_moveTo;
return (this);
}
function lib_moveTo(x,y){
  this.x=x!=''?x:this.x;
this.y=y!=''?y:this.y;
this.css.left=this.x;
this.css.top=this.y
}
function getLayerX( ID ) {
  if (bw.ns6) return(parseInt(document.getElementById(ID).style.left));
  else if (bw.ns) return(document.layers[ID].left);
  else return(document.all[ID].offsetLeft);
}
function getLayerY( ID ) {
if (bw.ns6) return(parseInt(document.getElementById(ID).style.top));
else if (bw.ns) return(document.layers[ID].top);
else return(document.all[ID].offsetTop);
}
//-->
</SCRIPT>
</HEAD><BODY onload="dragInit()">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>