<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>表格头拖动</title>
<style type="text/css" >
table {
border-collapse: collapse;
}
td {
text-align: center;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
(function ($){
$.fn.tableresize = function () {
var _document = $("body");
$(this).each(function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
//设定ID
var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//设定临时变量存放对象
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
ths.mousemove(function (e) {
var _this = $(this);
var left = _this.offset().left,
top = _this.offset().top,
width = _this.width(),
height = _this.height(),
right = left + width,
bottom = top + height,
clientX = e.clientX,
clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5,
rightside = Math.abs(right - clientX) <= 5;
if (cobjs._currentLeft||clientY>top&&clientY<bottom&&(leftside||rightside)){
_document.css("cursor", "e-resize");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _this.prev();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
cobjs._currentObj = null;
}
});
ths.mouseout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_document.css("cursor", "auto");
}
});
_document.mousedown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = e.clientX;
}
else {
cobjs._currentLeft = null;
}
});
_document.mouseup(function (e) {
if (cobjs._currentLeft) {
cobjs._currentObj.width(cobjs._currentObj.width() + (e.clientX - cobjs._currentLeft));
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_document.css("cursor", "auto");
});
});
};
})(jQuery);
$(document).ready(function () {
$("table").tableresize();
});
</script>
</head>
<body>
<table cellspacing="0" border="1" rules="all">
<tbody>
<tr>
<td style="width:200px;">ID</td>
<td style="width:200px;">名字</td>
<td style="width:200px;">年纪</td>
<td style="width:200px;">地址</td>
<td style="width:200px;">电话</td>
</tr>
<tr>
<td>22</td>
<td>Name:44</td>
<td>Age:23</td>
<td>Address:47</td>
<td>Phone:15</td>
</tr>
<tr>
<td>28</td>
<td>Name:42</td>
<td>Age:68</td>
<td>Address:30</td>
<td>Phone:50</td>
</tr>
<tr>
<td>29</td>
<td>Name:63</td>
<td>Age:48</td>
<td>Address:90</td>
<td>Phone:76</td>
</tr>
</tbody>
</table>
</body>
</html>
关于表格是否能选中文字
user-select:none | text | all | element
默认值:text
适用于:除替换元素外的所有元素
继承性:无
动画性:否
计算值:指定值
取值:
说明:
设置或检索是否允许用户选中文本。
- IE6-9不支持该属性,但支持使用标签属性
onselectstart="return false;"
来达到user-select:none
的效果;Safari和Chrome也支持该标签属性; - 直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性
unselectable="on"
来达到user-select:none
的效果;unselectable 的另一个值是 off; - 除Chrome和Safari外,在其它浏览器中,如果将文本设置为
-ms-user-select:none;
,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为-ms-user-select:none;
的区域文本; - 对应的脚本特性为userSelect。