动态表格宽度调整

最新推荐文章于 2022-07-11 21:22:56 发布

a385833253

最新推荐文章于 2022-07-11 21:22:56 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： class function border table div null

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第一种

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
</HEAD>

<BODY>
<style>
.resizeDivClass
{
position:relative;
background-color:gray;
width:2;
z-index:1;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;

}
</style>

obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}

</script>

<tr>
<td>徐宏辉</td><td>国联证券</td><td>电子商务部</td>
</tr>
</table>

</BODY>
</HTML>

第二种

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
</head>
<style type="text/css">
body {
    font-family: "arial", "helvetica", "sans-serif", "";
     font-size: 9pt;
    margin: 0px;
    scrollbar-face-color:#efefe7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#a5a5a5;
    scrollbar-darkshadow-color:#a5a5a5;
    scrollbar-shadow-color:#d6d6ce;
    scrollbar-arrow-color:#003184;
    scrollbar-track-color:#deded6;
}
table {
    font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
         }
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
   (onscroll = function(){
    if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;

    var oGridBody = document.getElementById("order_GridBody");
    oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
    event.srcElement.oldScroll == event.srcElement.scrollLeft;
   }):true,
onmousedown == null?
   (onmousedown = function(){
     if(self.currentTH != null) return;
     var obj = document.elementFromPoint(event.x,event.y);
     var objL = document.elementFromPoint(event.x - 1,event.y);

     if(obj.tagName.toLowerCase() == "th")
     {

      if(objL.tagName.toLowerCase() == "th")
      {
       obj = objL;
      }
      if(obj.className == "fixed") return;
      self.currentX = event.x;
      self.currentTH = obj.childNodes[0];
      self.currentTH.setCapture();
     }
   }):true,
onmouseup == null?
   (onmouseup = function(){
     if(self.currentTH != null)
     {
      self.currentTH.releaseCapture();
      self.currentTH = null;
     }
   }):true,
onmousemove == null?
   (onmousemove = function(){
     if(self.currentTH != null)
     {
      var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
      if(width < 0) width = 0;
      var dt = parseInt(self.currentTH.style.width) - width;
      self.currentTH.style.width = width;
      __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
      self.currentX = event.x;
     }
   }):true,
self.__resizeCell == null?
   (self.__resizeCell = function(idx, width){
     var cells = document.getElementById("order_GridBody_Cells");
     var rows = cells.childNodes;
     var i = 0;
     for (var i = 0; i < rows.length; i++)
     {
      var cell = rows[i].childNodes[idx].childNodes[0];

     cell.style.width=width;
    // var resetPattern = /style=[^\s\t\n]+/;
    // cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
           }
   }):true
)
}
div.bodyContainer
{
height:400px;

overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
   (ondblclick = function()
   {
    var src = event.srcElement;
    if(event.srcElement.tagName.toLowerCase()!="div")
    {
     src = src.childNodes[0];
    }
    src.style.width = "";
    __resizeCell(src.columnIndex,src.clientWidth);
   }):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid; http://mobile.younet.com/files/list_222.html
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
</style>

<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<thead>
   <th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
   <th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
   <th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
   <th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
   <th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
   <th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
   <th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
   <th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
   <th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
</thead>
</table>

</td>
</tr>

<tbody>
<tr class="odd">
<td colspan="9">

<div id="order_GridBody" class="bodyContainer">
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">

</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>

====================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
</head>
<style type="text/css">
body {
    font-family: "arial", "helvetica", "sans-serif", "";
     font-size: 9pt;
    margin: 0px;
    scrollbar-face-color:#efefe7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#a5a5a5;
    scrollbar-darkshadow-color:#a5a5a5;
    scrollbar-shadow-color:#d6d6ce;
    scrollbar-arrow-color:#003184;
    scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
         }
.display-tb2
{
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
height:400px;
dyn-behavior:expression(
onscroll == null?
   (onscroll = function(){
    if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;

     }
   }):true
)
}
div.bodyContainer
{
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:red;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
   (ondblclick = function()
   {
    var src = event.srcElement;
    if(event.srcElement.tagName.toLowerCase()!="div")
    {
     src = src.childNodes[0];
    }
    src.style.width = "";
    __resizeCell(src.columnIndex,src.clientWidth);
   }):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}

td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
</style>

</td>
</tr>

<tbody>
<tr class="odd">
<td colspan="9">

</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>

第三种

<html>
<title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"></style>
<script type="text/javascript"><!--
window.οnlοad=function(){
drag(document.getElementById('drag'));
drag(document.getElementById('drag2'));
drag(document.getElementById('drag3'));
drag(document.getElementById('drag4'));
};
function drag(o,r){
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/{
if(window.ActiveXObject){
return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}else{
return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}

o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w，在IE下可只设第一行*/{
for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) {
o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;
}
}

var out=document.getElementById('my');

o.firstChild.οnmοusedοwn=function(){return false;};
o.οnmοusedοwn=function(a){
var d=document;if(!a)a=window.event;
var lastX=a.clientX;
var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大，
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
//
d.οnmοusemοve=function(a){
if(!a)a=window.event;
if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){
o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0));
return;
}
var t=a.clientX-lastX;out.innerHTML=t;
if(t>0) {//right
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
} else {//left
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
}
lastX=a.clientX;
};
d.οnmοuseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.οnmοusemοve=null;
d.οnmοuseup=null;
};
};
}
// --></script>
<body >
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >
<tr >
<td class="num" >序号</td>
<td class="tit" >
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
公司名称
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
订单客户
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
部门
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
业务员
</td>
<td class="tit" >

交款方式
</td>
</tr>
<tr >
<td class="num" >1</td>
<td> <div style="white-space:nowrap;overflow:hidden;width:100%;">脚本之家</div></td>
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td>
<td >广告部</td>
<td >王天一</td>
<td >现金</td>
</tr >
</table>

a385833253

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态表格宽度调整

New Document .resizeDivClass{position:relative;background-color:gray;width:2;z-index:1;left:expression(this.pa
复制链接

扫一扫