【www.hj8828.com】HTML 自动伸缩的表格Table js实现_javascript技巧_脚本之家

下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。
1、对开发人员指定的表格没有任何影响; 2、使用简单;
3、被定义的表格样式可以随意的定制你的样式,不对你的样式构成影响;
4、移植性好,扩展性好。
目前用IE7测试正常,但不支持FireFox,工作比较忙,没时间更正,希望网友更正,俺在此谢过。^_^
1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中;
2、引入包AutoTableSize.js,页面body底部加入:

针对dhDataGrid的前一版本Ver1.0.0而做的更新!

3、编写你的脚本调用: new AutoTableSize();
当DOM对象中只有一个Table的时候不用指定Table的ID属性; new AutoTableSize;
table:既可以是表格的ID属性,也可以是表格对象; 源码AutoTableSize.js复制代码 代码如下:/** * @ version: 1.0 * @
author:Xing,Xiudong * @ email:xingxiudong[at]gmail.com * @
index: * @ date:2009.04.01 愚人节 * @
desciption: AutoTableSize */ function AutoTableSize { table = table ||
document.getElementsByTagName[0]; this.table = typeof == “String” ?
document.getElementById : table; this.init(); }
AutoTableSize.prototype.init = function() { autoTableSize = this; var
lastClickRowIndex; var clickCount = 0; for (var i = 0; i <
this.table.rows.length; i++) { var maxRowHeight = 0; var tds =
this.table.rows[i].cells; if continue; for (var j = 0; j <
tds.length; j++) { maxRowHeight = maxRowHeight >
tds[j].offsetHeight ? maxRowHeight : tds[j].offsetHeight; var
innerDiv = document.createElement; innerDiv.style.height =
Number(this.table.style.fontSize.substring(0,
this.table.style.fontSize.length – 2)) + 1 + “px”;
innerDiv.style.overflow = “hidden”; innerDiv.style.margin = “0”;
innerDiv.style.padding = “0”; innerDiv.style.border = “0”;
innerDiv.innerHTML = tds[j].innerHTML; tds[j].innerHTML = “”;
tds[j].appendChild; } this.table.rows[i].maxHeight = maxRowHeight;
this.table.rows[i].onmouseover = function(){this.style.backgroundColor
= “#DAE9FE”;} this.table.rows[i].onmouseout = function()
{this.style.backgroundColor = “#FFF”;} this.table.rows[i].onclick =
function() { if (this.rowIndex == lastClickRowIndex) { if {
autoTableSize.showTR; } else { autoTableSize.hideTR; } clickCount++;
return; } autoTableSize.hideTR; autoTableSize.showTR; lastClickRowIndex
= this.rowIndex; clickCount++; } } } AutoTableSize.prototype.hideTR =
function { if return; tds = this.table.rows[index].cells; for (var i =
0; i < tds.length; i++) { tds[i].firstChild.style.height =
Number(this.table.style.fontSize.substring(0,
this.table.style.fontSize.length – 2)) + 1 + “px”; } }
AutoTableSize.prototype.showTR = function { if return; tds =
this.table.rows[index].cells; for (var i = 0; i < tds.length; i++)
{ tds[i].firstChild.style.height = this.table.rows[index].maxHeight

1、标题栏、左边边栏固定方式更新,取消expression方式;

  • 2 * this.table.getAttribute; } }

2、排序方式更新,同时支持数字、字符、日期、数字字符混合、中文汉字的排序;

3、支持换肤,您可以自己定制该控件样式;

4、预留[双击]、[右键]功能;

5、支持IE、FF;

CSS:

/*dhdatagrid 大块样式*/
#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid 表格全局样式*/
#dhdatagrid table {table-layout:fixed;margin:0px;}
#dhdatagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1px solid buttonface;border-bottom:1px solid buttonface;}
#dhdatagrid table td .arrow {font-size:8px;color:#808080;}
#dhdatagrid table .lastdata {border-right:none;}
#dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;}
#dhdatagrid table .dataover {background:#FAFAFA;}
#dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 选定行样式*/
#dhdatagrid table .selectedrow {background:highlight;color:white;}
/*dhdatagrid 表头样式*/
#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}
/*dhdatagrid 左边栏样式*/
#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
#dhdatagrid #slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 内容表体样式*/
#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}
/*dhdatagrid 原点样式*/
#dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;text-align:center;font-size:10px;color:#A19F92;}

JS:

function dhdatagrid(){
//author:dh20156;
this.callname = “dhdg”;
this.width = 500;
this.height = 200;
this.rid = “dhdatagrid”;
this.columns = [];
this.data = [];
this.dblclick_fun = function(){}
this.contextmenu_fun = function(){}
this.parentNode = document.body;

var dh = this;
var framediv = null;
var zerobj = null;
var leftobj = null;
var titleobj = null;
var dataobj = null;
var hbar = null;
var vbar = null;
var bgbar = null;

//改变列宽初始位置
var ml = 0;
//改变列宽对象初始宽度
var ow = 0;
//改变列宽对象
var tdobj = null;
//当前选定行索引
var nowrow = null;
//是否更改垂直滚动条位置
var changeposv = true;

this.init = function(){
 //init the data 初始数据
 var dgc = “”;
 if(this.columns.length>0){
  dgc = “<tr><td class=\”firstcolumn\”> </td>”;
  for(var cc=0;cc<this.columns.length;cc++){
   dgc += “<td class=\”column\” onmouseover=\””+this.callname+”.over(this);\” onmouseout=\””+this.callname+”.out(this);\” onmousemove=\””+this.callname+”.cc(event,this);\” onmousedown=\””+this.callname+”.rsc_d(event,this);\” onmouseup=\””+this.callname+”.mouseup(this);\”>”+this.columns[cc]+”<span class=\”arrow\”></span></td>”;
  }
  dgc += “<td class=\”lastcolumn\”> </td></tr>”;
 }

 var dgs = “”;
 var dgd = “”;
 if(this.data.length>0){
  //第一列
  dgs = “<tr><td> </td></tr>”;
  for(var r=0;r<this.data.length;r++){
   dgs += “<tr><td>”+(r+1)+”</td></tr>”;
   dgd += “<tr onmouseover=\””+this.callname+”.dataover(this);\” onmouseout=\””+this.callname+”.dataout(this);\”><td class=\”firstcolumn\”> </td>”;
   for(var c=0;c<this.data[r].length;c++){
    dgd += “<td ondblclick=\””+this.callname+”.dblclick_fun(this);\” oncontextmenu=\””+this.callname+”.contextmenu_fun(this);\”>”+this.data[r][c]+”</td>”;
   }
   dgd += “<td class=\”lastdata\”> </td></tr>”;
  }
  if(dgc==””){
   dgc = “<tr><td class=\”firstcolumn\”> </td>”;
   for(var dc=0;dc<this.data[0].length;dc++){
    dgc += “<td class=\”column\” onmouseover=\””+this.callname+”.over(this);\” onmouseout=\””+this.callname+”.out(this);\” onmousemove=\””+this.callname+”.cc(event,this);\” onmousedown=\””+this.callname+”.rsc_d(event,this);\” onmouseup=\””+this.callname+”.mouseup(this);\”>Expr”+(dc+1)+”<span class=\”arrow\”></span></td>”;
   }
   dgc += “<td class=\”lastcolumn\”> </td></tr>”;
  }
 }

 //dhdatagrid frame 框架
 var dgframe = document.createElement(“DIV”);
 dgframe.id = this.rid;
 dgframe.onmousedown = function(e){e=e||window.event;getrow(e);}
 dgframe.onmousemove = function(e){e=e||window.event;rsc_m(e);}
 if(document.attachEvent){
  document.attachEvent(“onmouseup”,rsc_u);
 }else{
  document.addEventListener(“mouseup”,rsc_u,false);
 }
 dgframe.oncontextmenu = function(){return false}
 dgframe.onselectstart = function(){return false}
 ae(dgframe);

 //dhdatagrid zero point 零点
 var dgzero = “<div id=\”zero\”></div>”

 //dhdatagrid slidecolumn 第一列
 var dgslide = “<table cellpadding=\”0\” cellspacing=\”0\” id=\”slidecolumn\”>”+dgs+”</table>”;

 //dhdatagrid column 标题栏
 var dgcolumn = “<table cellpadding=\”0\” cellspacing=\”0\” id=\”titlecolumn\”>”+dgc+”</table>”;

 //dhdatagrid data 数据
 var dgdata = “<table cellpadding=\”0\” cellspacing=\”0\” id=\”datacolumn\”>”+dgc+dgd+”</table>”;

 //dhdatagrid hbar 水平滚动条
 var dghbar = document.createElement(“DIV”);
 dghbar.id = “hbar”;
 dghbar.style.position = “absolute”;
 dghbar.style.width = “100%”;
 dghbar.style.height = “17px”;
 dghbar.style.top = this.height-17;
 dghbar.style.overflowX = “auto”;
 dghbar.style.zIndex = “10”;
 dghbar.onscroll = function(){scrh();}
 dghbar.innerHTML = “<div style=\”width:100%;height:1px;overflow-y:hidden;\”> </div>”;

 //dhdatagrid vbar 垂直滚动条
 var dgvbar = document.createElement(“DIV”);
 dgvbar.id = “vbar”;
 dgvbar.style.position = “absolute”;
 dgvbar.style.width = “17px”;
 dgvbar.style.height = “100%”;
 dgvbar.style.left = this.width-17;
 dgvbar.style.overflowY = “auto”;
 dgvbar.style.zIndex = “10”;
 dgvbar.onscroll = function(){scrv();}
 dgvbar.innerHTML = “<div style=\”width:1px;height:100%;overflow-x:hidden;\”> </div>”;

 //dhdatagrid bgbar 滚动条背景
 var dgbgbar = document.createElement(“DIV”);
 dgbgbar.id = “bgbar”;
 dgbgbar.style.background = “buttonface”;
 dgbgbar.style.position = “absolute”;
 dgbgbar.style.width = “100%”;
 dgbgbar.style.height = “17px”;
 dgbgbar.style.top = this.height-17;
 dgbgbar.style.overflowX = “auto”;
 dgbgbar.style.zIndex = “9”;
 dgbgbar.style.display = “none”;
 dgbgbar.innerHTML = ” “;

 //appendChild
 dgframe.innerHTML = dgzero+dgslide+dgcolumn+dgdata;
 dgframe.appendChild(dghbar);
 dgframe.appendChild(dgvbar);
 dgframe.appendChild(dgbgbar);

 this.parentNode.appendChild(dgframe);

 if(document.attachEvent){
  document.attachEvent(“onkeydown”,updown);
 }else{
  document.addEventListener(“keydown”,updown,false);
 }

 framediv = dgframe;
 zerobj = document.getElementById(“zero”);
 leftobj = document.getElementById(“slidecolumn”);
 titleobj = document.getElementById(“titlecolumn”);
 dataobj = document.getElementById(“datacolumn”);
 hbar = dghbar;
 vbar = dgvbar;
 bgbar = dgbgbar;

 var btt = getCurrentStyle(framediv,”borderTopWidth”);
 var btr = getCurrentStyle(framediv,”borderRightWidth”);
 var btb = getCurrentStyle(framediv,”borderBottomWidth”);
 var btl = getCurrentStyle(framediv,”borderLeftWidth”);
 var fh = getCurrentStyle(framediv,”height”);
 var zh = getCurrentStyle(zerobj,”height”);
 var zbt = getCurrentStyle(zerobj,”borderTopWidth”);
 var zbb = getCurrentStyle(zerobj,”borderBottomWidth”);

 if(document.all){
  vbar.style.left = parseInt(vbar.style.left)-parseInt(btr)-parseInt(btl);
 }else{
  framediv.style.height = parseInt(fh)-parseInt(btb)-parseInt(btt);
  zerobj.style.height = parseInt(zh)-parseInt(zbb)-parseInt(zbt);
 }

 hbar.style.top = parseInt(hbar.style.top)-parseInt(btb)-parseInt(btt);
 bgbar.style.top = parseInt(bgbar.style.top)-parseInt(btb)-parseInt(btt);
}
function getCurrentStyle(oElement, sProperty) {   
 if(oElement.currentStyle){   
  return oElement.currentStyle[sProperty];   
 }else if(window.getComputedStyle){   
  sProperty = sProperty.replace(/([A-Z])/g, “-$1”).toLowerCase();   
  return window.getComputedStyle(oElement, null).getPropertyValue(sProperty);   
 }else{   
  return null;   
 }   
}
//设置块滚动条
this.setwh = function(){
 hbar.style.display = “block”;
 vbar.style.display = “block”;
 hbar.childNodes[0].style.width = dataobj.offsetWidth;
 vbar.childNodes[0].style.height = dataobj.offsetHeight;
 if(hbar.childNodes[0].offsetWidth<=hbar.offsetWidth){
  hbar.style.display = “none”;
 }else{
  hbar.style.display = “block”;
 }
 if(vbar.childNodes[0].offsetHeight<=vbar.offsetHeight){
  vbar.style.display = “none”;
 }else{
  vbar.style.display = “block”;
 }
 if(hbar.childNodes[0].offsetWidth>hbar.offsetWidth && vbar.childNodes[0].offsetHeight>vbar.offsetHeight && changeposv){
  bgbar.style.display = “block”;
  hbar.style.width = hbar.offsetWidth-17;
  vbar.style.height = vbar.offsetHeight-17;
  vbar.childNodes[0].style.height = vbar.childNodes[0].offsetHeight+17;
  changeposv = false;
 }
 if(hbar.childNodes[0].offsetWidth<=hbar.offsetWidth+17 && !changeposv){
  bgbar.style.display = “none”;
  hbar.childNodes[0].style.width = 0;
  hbar.style.width = hbar.offsetWidth+17;
  vbar.style.height = vbar.offsetHeight+17;
  changeposv = true;
  if(vbar.offsetHeight-dataobj.offsetHeight>dataobj.offsetTop && document.all){
   leftobj.style.top = leftobj.offsetTop+17;
   dataobj.style.top = dataobj.offsetTop+17;
  }
 }
}

//鼠标滚轮,列表滚动事件
function mwEvent(e){
 e=e||window.event;
 if(e.wheelDelta<=0 || e.detail>0){
  vbar.scrollTop += 18;
 }else {
  vbar.scrollTop -= 18;
 }
}
function ae(obj){
 if(document.attachEvent){
  obj.attachEvent(“onmousewheel”,mwEvent);
 }else{
  obj.addEventListener(“DOMMouseScroll”,mwEvent,false);
 }
}

//滚动条事件
function scrv(){
 leftobj.style.top = -(vbar.scrollTop);
 dataobj.style.top = -(vbar.scrollTop);
}

function scrh(){
 titleobj.style.left = -(hbar.scrollLeft);
 dataobj.style.left = -(hbar.scrollLeft);
}

//选择行
function getrow(e){
 e=e||window.event;
 var esrcobj = e.srcElement?e.srcElement:e.target;
 if(esrcobj.parentNode.tagName==”TR”){
  var epobj = esrcobj.parentNode;
  var eprowindex = epobj.rowIndex;
  if(eprowindex!=0){
   if(nowrow!=null){
    dataobj.rows[nowrow].className = “”;
   }
   dataobj.rows[eprowindex].className = “selectedrow”;
   nowrow = eprowindex;
  }
 }
}

//更改列宽
this.rsc_d = function(e,obj){
 var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
 if(px>obj.offsetWidth-6 && px<obj.offsetWidth){
  e=e||window.event;
  obj=obj||this;
  ml = e.clientX;
  ow = obj.offsetWidth;
  tdobj = obj;
  if(obj.setCapture){
   obj.setCapture();
  }else{
   e.preventDefault();
  }
 }else{
  if(nowrow!=null){
   dataobj.rows[nowrow].className = “”;
  }
  if(obj.getAttribute(“sort”)==null){
   obj.setAttribute(“sort”,0);
  }
  var sort = obj.getAttribute(“sort”);
  if(sort==1){
   dgsort(obj,true);
   obj.setAttribute(“sort”,0);
  }else{
   dgsort(obj,false);
   obj.setAttribute(“sort”,1);
  }
  obj.className = “sortdown”;
 }
}
this.mouseup = function(obj){
 obj.className = “over”;
}
function rsc_m(e){
 if(tdobj!=null){
  e=e||window.event;
  var newwidth = ow-(ml-e.clientX);
  if(newwidth>5){
   tdobj.style.width = newwidth;
   dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
  }else{
   tdobj.style.width = 5;
   dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
  }
  dh.setwh();
  scrh();
 }
}
function rsc_u(e){
 if(tdobj!=null){
  e=e||window.event;
  var newwidth = ow-(ml-e.clientX);
  if(newwidth>5){
   tdobj.style.width = newwidth;
   dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
  }else{
   tdobj.style.width = 5;
   dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
  }
  if(tdobj.releaseCapture){
   tdobj.releaseCapture();
  }
  ml = 0;
  ow = 0;
  tdobj = null;
 }
 dh.setwh();
 scrh();
}

this.cc = function(e,obj){
 var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
 if(px>obj.offsetWidth-6 && px<obj.offsetWidth){
  obj.style.cursor = “col-resize”;
 }else{
  obj.style.cursor = “default”;
 }
}

this.over = function(obj){
 obj.className = “over”;
}