<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<table cellspacing="0" border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>15555555555</td>
<td>重庆市沙坪坝区</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>18</td>
<td>15555555555</td>
<td>重庆市沙坪坝区</td>
</tr>
</tbody>
</table>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});
$("th").bind("mousemove", function(event) {
var th = $(this); //不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left; //距离表头边框线左右4像素才触发效果
if (event.clientX - left < 2 || (th.width() - (event.clientX - left)) < 2) {
th.css({ 'cursor': 'w-resize' }); //修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});
$("th").bind("mousedown", function(event) {
var th = $(this); //与mousemove函数中同样的判断
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" }); //全局变量，代表当前是否处于调整列宽状态
lineMove = true; //总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2){
currTh = th.prev();
} else {
currTh = th;
}
}
});
$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});
$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<table cellspacing="0" border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>15555555555</td>
<td>重庆市沙坪坝区</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>18</td>
<td>15555555555</td>
<td>重庆市沙坪坝区</td>
</tr>
</tbody>
</table>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});
$("th").bind("mousemove", function(event) {
var th = $(this); //不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left; //距离表头边框线左右4像素才触发效果
if (event.clientX - left < 2 || (th.width() - (event.clientX - left)) < 2) {
th.css({ 'cursor': 'w-resize' }); //修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});
$("th").bind("mousedown", function(event) {
var th = $(this); //与mousemove函数中同样的判断
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" }); //全局变量，代表当前是否处于调整列宽状态
lineMove = true; //总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2){
currTh = th.prev();
} else {
currTh = th;
}
}
});
$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});
$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
</script>
</body>
</html>
6159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
