js与jquery实例-拖动改变列宽和行高

乐之者java

于 2020-04-17 21:04:58 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105588448

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

干货来了，如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果图：

html结构：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
	<script src="./jquery-1.12.4.min.js"></script>
    <style>
        table th{
            cursor:col-resize;
			background:rgb(204,215,255);
        }
    </style>
</head>
<body>
	<table id="tb1" cellspacing="0" cellpadding="2" width="100%" border="1">
		<tbody>
			<tr>
				<th>编号</th><th>名称</th><th>英文名</th><th>上线时间</th><th>主要功能</th>
				<th>备注</th><th>网址</th><th>大小</th>
			</tr>
			<tr>
				<td>01</td><td>乐之者java</td><td>lzzjava</td><td>2017-08-06</td>
				<td>java相关的原创视频与文章</td>
				<td>网站</td><td>http://www.roadjava.com/</td><td>-</td>
			</tr>
			<tr>
				<td>02</td><td>乐之者内容管理系统</td><td>lzzcms</td><td>2017-08-06</td><td>cms类软件</td>
				<td>软件</td><td>-</td><td>几十兆吧</td>
			</tr>
			<tr>
				<td>01</td><td>乐之者java</td><td>lzzjava</td><td>2017-08-06</td>
				<td>java相关的原创视频与文章</td>
				<td>网站</td><td>http://www.roadjava.com/</td><td>-</td>
			</tr>
			<tr>
				<td>02</td><td>乐之者内容管理系统</td><td>lzzcms</td><td>2017-08-06</td><td>cms类软件</td>
				<td>软件</td><td>-</td><td>几十兆吧</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

JavaScript与jquery代码：

<script>
	//js实现改变宽度
    var resizeTd; 
    var table = document.getElementById("tb1");
    for (j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function (e) {
            if (this.offsetWidth-e.offsetX< 10) {
				resizeTd = this;//保存下要操作的列
                resizeTd.initClientX = e.clientX;//保存下鼠标按下时鼠标相对该单元格x方向的偏移
                resizeTd.initWidth = resizeTd.offsetWidth;//保存下该单元格的宽度
            }
        };
        table.rows[0].cells[j].onmousemove = function () {//更改鼠标样式
            if (this.offsetWidth-event.offsetX<10){
				 this.style.cursor = 'col-resize';
			}else{
				this.style.cursor = 'default';
			}
        };
    }
	document.onmouseup = function () {//不需要写在上边的for循环里面
           resizeTd = null;
    };
	document.onmousemove = function (evt) {
		if(resizeTd){	
			if(resizeTd.initWidth+(evt.clientX-resizeTd.initClientX)>0){
				resizeTd.width=resizeTd.initWidth+(evt.clientX-resizeTd.initClientX);
			}
		}
	};
	
	
	//jquery实现改变高度
	var resizeTr;
	$("tr").mousedown(function(e){//鼠标按下时初始化当前要操作的行
		if($(this).outerHeight()-e.offsetY<10){
			resizeTr=this;
			resizeTr.initClientY=e.clientY;
			resizeTr.initHeight=$(this).outerHeight();
		}
	});
	$(document).mouseup(function(){//鼠标抬起时置空当前操作的行
		resizeTr=null;
	});
	$("tr").mousemove(function(evt){ //鼠标在接近行底部时改变形状
		if($(this).outerHeight()-evt.offsetY<10){
			$(this).css("cursor","row-resize");
		}else{
			$(this).css("cursor","default");
		}
	});
	//如果鼠标移动事件绑定在tr上，当移动过快时会导致tr的高度变化跟不上鼠标的移动变化
	$(document).mousemove(function(evt){
		if(resizeTr){	
			if(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY)>0){
				$(resizeTr).outerHeight(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY));
			}
		}
	});
</script>

值得指出的几个地方需要注意下：

分清楚几个概念,即事件对象event的x、clientX、pageX、screenX、offsetX(当然y,clientY,pageY,screenY,offsetY类似)以及HtmlElement对象的offsetWidth、offsetHeight、offsetLeft、offsetTop、scrollWidth、scrollHeight、scrollLeft、scrollTop是理解本程序的关键。
mousemove事件在改变宽度或高度的时候不要绑定在tr元素上，要绑定在document上，不然当鼠标移动过快时，宽度或者高度会跟不上鼠标移动的速度，最终不会发生变化。

乐之者java

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js与jquery实例-拖动改变列宽和行高

干货来了，如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果图：html结构：<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>tabl...
复制链接

扫一扫