表格左右/上下拖动（javascript特效）

最新推荐文章于 2024-06-25 14:54:10 发布

原创最新推荐文章于 2024-06-25 14:54:10 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #border #table #class #div

软件开发专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种通过鼠标拖拽实现HTML表格单元格高度及宽度动态调整的方法。该方法允许用户直观地调整表格布局，提高网页编辑效率。文章详细解释了实现这一功能所需的JavaScript和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<style>

.resizeDivClass

{

position:absolute;

background-color:gray;

width:1;

z-index:1;

left:1;

cursor:e-resize;

}

.tde {

font-size: 12px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

color:#0000ff;

pos:expression(this.offsetLeft*1+this.offsetWidth*1+tab.offsetLeft);

}

{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

#tab

{

table-layout:auto;

border-collapse:collapse;

border:1px solid #000000;

width:100%;

}

</style>

/////////////////////////////////////move UP/DOWNM

function $(dom_id) {

return document.getElementById(dom_id);

}

function MouseDownToResize(obj) {

obj.mouseDownY = event.clientY;

$('td1').pareneTdH = $('td1').offsetHeight;

$('td2').pareneTdH = $('td2').offsetHeight;

$('td3').pareneTdH = $('td3').offsetHeight;

$('tab').pareneTableH = $('tab').offsetHeight;

obj.setCapture();

}

function MouseMoveToResize(obj) {

if(!obj.mouseDownY) return false;

var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;

if((newHeight<0 && -1*newHeight<$('td1').pareneTdH )||(newHeight>0 && newHeight<$('td3').pareneTdH))

{

$('td1').style.height = $('td1').pareneTdH+newHeight;

$('td3').style.height = $('td3').pareneTdH-newHeight;

$('t1').style.height = $('td1').style.height;

$('t2').style.height =$('td3').style.height;

$('tab').style.height = $('tab').pareneTableH;

window.status = newHeight +"||"+ $('td3').style.height;

}

function MouseUpToResize(obj) {

obj.releaseCapture();

obj.mouseDownY=0;

}

function setsize() {

$("t1").style.height = "300px";

$("t2").style.height = "400px";

}

///////////////////////////////////////move left/right

function MouseDownToResize1(obj){

obj.mouseDownX=event.clientX;

obj.pareneTdW=obj.parentElement.offsetWidth;

obj.pareneTableW=tab.offsetWidth;

obj.setCapture();

}

function MouseMoveToResize1(obj){

if(!obj.mouseDownX) return false;

var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;

if(newWidth>0)

{

obj.parentElement.style.width = newWidth;

tab.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;

for (var i=1; i<=tab.rows(0).cells.length;i++){

var obj = eval("mydiv"+i);

obj.style.left = obj.parentElement.offsetLeft*1+obj.parentElement.offsetWidth*1+tab.offsetLeft;//obj.parentElement.style.pos;

}

function MouseUpToResize1(obj){

obj.releaseCapture();

obj.mouseDownX=0;

}

function init(){

var tempStr = "";

for (var i=1; i<=tab.rows(0).cells.length;i++){

tempStr = '<div id="mydiv'+i+'" class="resizeDivClass" onmousedown="MouseDownToResize1(this);" onmousemove="MouseMoveToResize1(this);" onmouseup="MouseUpToResize1(this);"></div>';

tab.rows(0).cells(i-1).innerHTML = tab.rows(0).cells(i-1).innerHTML+tempStr;

var obj = eval("mydiv"+i);

obj.style.left = obj.parentElement.style.pos;

}

</script>

</head>

<th class="tde" >title1 (move left/right)</th>

<th class="tde" >title2 (move left/right)</th>

<th class="tde" >title3 (move left/right)</th>

</tr>

</table></div>

</td></tr>

<td colspan="3" id="td2" style="font-size: 14px;color:red;">use Mouse move me UP/DOWNM

</td></tr>

</table></div>

</td></tr>

</table>

</body>

</html>