html可拖动的表格

最新推荐文章于 2024-08-08 23:38:27 发布

比丘

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量1.7k

点赞数 1

文章标签： html function table class c jquery

本文链接：https://blog.csdn.net/q358417681/article/details/6982371

版权

<html>
	<head>
		<style type="text/css">
			table{
				border-left:1px solid #c3c3c3;
				border-top:1px solid #c3c3c3;
			}
			table td{
				border-bottom:1px solid #c3c3c3;
				border-right:1px solid #c3c3c3;
			}
			table th{
				border-bottom:1px solid #c3c3c3;
				border-right:1px solid #c3c3c3;
			}
			.pointer{
				cursor:e-resize;
			}
		</style>
		
		<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('table').mousemove(function(e){
					$(this).find('th').each(function(){
						//得到th的边线位置
						var x = $(this).offset().left+$(this).width()+1;
						
						//判断鼠标移动到th的边线上改变鼠标样式
						if(e.clientX==x || e.clientX==x+1 || e.clientX==x-1){
							$(this).addClass('pointer');
						}else{
							$(this).removeClass('pointer');
						}
						var isrn = false;//记录操作状态
						$(this).mousedown(function(e1){
							if(e1.which==1){//1表示左键，2表示中健，3表示右键
								var x1 = e1.clientX;
								var width = $(this).width();
								var $this = $(this);
								isrn=true;
								$(document).mousemove(function(e2){
									if(isrn){
										var x2 = e2.clientX-x1;
										$($this).width(width+x2);
									}
								});
								$(document).mouseup(function(){
									isrn = false;
								});
							}
						});
					});
					
				});
			});
		</script>
		
	</head>
	<body>
		
		<table border="0" cellPadding="0" cellSpacing="0">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
		</table>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

以上为代码，需要导入jQuery包，如果写得不好还请见谅。