JS-Demo1：JavaScript实现表格列拖动
2015-12-12 01:07
676 查看
JS表格列可拖动特效：
[html] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-top:solid 1px black;
border-left:solid 1px black;
font-size:12px;
width: 100%;
}
th{
white-space: nowrap;
}
th,td{
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
height:30px;
}
.dragable{
width: 3px;
height:100%;
background-color: white;
float: right; /*这个样式与效果有一定关系,其他无所谓*/
cursor: col-resize;
}
</style>
<script type="text/javascript">
var draging = false;//是否拖拽中
var dragElement = null;//当前拖拽的th
var offsetLeft = 0;//当前拖拽的th与绝对左坐标
var offsetWidth = 0;//当前拖拽的th的绝对宽度
function mousedown(){
if(draging) return;
draging = true;
dragElement = window.event.srcElement.parentNode;
offsetLeft = dragElement.offsetLeft;
document.body.style.cursor = "col-resize";
document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)
}
function mouseup(){
draging = false;
dragElement = null;
document.body.style.cursor = "auto";
document.body.onselectstart = function(){return true};
}
function mousemove(){
if(draging && dragElement){
var width = event.clientX-offsetLeft;
if(width>0){
dragElement.style.width = width;
offsetWidth = dragElement.offsetWidth;
}else{
dragElement.style.width = offsetWidth;
}
}
}
</script>
</head>
<body onmousemove="mousemove();" onmouseup="mouseup();">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width: 120px;">编号<span class="dragable" onmousedown="mousedown();"> </span></th>
<th style="width: 120px;">姓名<span class="dragable" onmousedown="mousedown();"> </span></th>
<th style="width: 120px;">年龄<span class="dragable" onmousedown="mousedown();"> </span></th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siuon</td>
<td>100</td>
<td>JavaEE工程师...</td>
</tr>
</tbody>
</table>
</body>
</html>
动态生成<span class="dragable" onmousedown="mousedown();"> </span>
[html] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-top:solid 1px black;
border-left:solid 1px black;
font-size:12px;
width: 100%;
}
th{
white-space: nowrap;
}
th,td{
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
height:30px;
}
.dragable{
width: 3px;
height:100%;
background-color: white;
float: right; /*这个样式与效果有一定关系,其他无所谓*/
cursor: col-resize;
}
</style>
<script type="text/javascript">
var draging = false;//是否拖拽中
var dragElement = null;//当前拖拽的th
var offsetLeft = 0;//当前拖拽的th与绝对左坐标
var offsetWidth = 0;//当前拖拽的th的绝对宽度
function mousedown(){
if(draging) return;
draging = true;
dragElement = window.event.srcElement.parentNode;
offsetLeft = dragElement.offsetLeft;
document.body.style.cursor = "col-resize";
document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)
}
function mouseup(){
draging = false;
dragElement = null;
document.body.style.cursor = "auto";
document.body.onselectstart = function(){return true};
}
function mousemove(){
if(draging && dragElement){
var width = event.clientX-offsetLeft;
if(width>0){
dragElement.style.width = width;
offsetWidth = dragElement.offsetWidth;
}else{
dragElement.style.width = offsetWidth;
}
}
}
//创建<span class="dragable" onmousedown="mousedown();"> </span>
function createSpan(){
var span = document.createElement("span");
span.className = "dragable";
span.attachEvent("onmousedown",mousedown);
span.innerHTML = " ";
return span;
}
function init(){
//在th添加span
var ths = document.getElementsByTagName("th");
for(var i=0;i<ths.length;i++){
ths[i].appendChild(createSpan());
}
}
</script>
</head>
<body onload="init()" onmousemove="mousemove();" onmouseup="mouseup();">
<table id="mytable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width: 120px;">编号</th>
<th style="width: 120px;">姓名</th>
<th style="width: 120px;">年龄</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siuon</td>
<td>100</td>
<td>JavaEE工程师...</td>
</tr>
</tbody>
</table>
</body>
</html>
[html] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-top:solid 1px black;
border-left:solid 1px black;
font-size:12px;
width: 100%;
}
th{
white-space: nowrap;
}
th,td{
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
height:30px;
}
.dragable{
width: 3px;
height:100%;
background-color: white;
float: right; /*这个样式与效果有一定关系,其他无所谓*/
cursor: col-resize;
}
</style>
<script type="text/javascript">
var draging = false;//是否拖拽中
var dragElement = null;//当前拖拽的th
var offsetLeft = 0;//当前拖拽的th与绝对左坐标
var offsetWidth = 0;//当前拖拽的th的绝对宽度
function mousedown(){
if(draging) return;
draging = true;
dragElement = window.event.srcElement.parentNode;
offsetLeft = dragElement.offsetLeft;
document.body.style.cursor = "col-resize";
document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)
}
function mouseup(){
draging = false;
dragElement = null;
document.body.style.cursor = "auto";
document.body.onselectstart = function(){return true};
}
function mousemove(){
if(draging && dragElement){
var width = event.clientX-offsetLeft;
if(width>0){
dragElement.style.width = width;
offsetWidth = dragElement.offsetWidth;
}else{
dragElement.style.width = offsetWidth;
}
}
}
</script>
</head>
<body onmousemove="mousemove();" onmouseup="mouseup();">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width: 120px;">编号<span class="dragable" onmousedown="mousedown();"> </span></th>
<th style="width: 120px;">姓名<span class="dragable" onmousedown="mousedown();"> </span></th>
<th style="width: 120px;">年龄<span class="dragable" onmousedown="mousedown();"> </span></th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siuon</td>
<td>100</td>
<td>JavaEE工程师...</td>
</tr>
</tbody>
</table>
</body>
</html>
动态生成<span class="dragable" onmousedown="mousedown();"> </span>
[html] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-top:solid 1px black;
border-left:solid 1px black;
font-size:12px;
width: 100%;
}
th{
white-space: nowrap;
}
th,td{
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
height:30px;
}
.dragable{
width: 3px;
height:100%;
background-color: white;
float: right; /*这个样式与效果有一定关系,其他无所谓*/
cursor: col-resize;
}
</style>
<script type="text/javascript">
var draging = false;//是否拖拽中
var dragElement = null;//当前拖拽的th
var offsetLeft = 0;//当前拖拽的th与绝对左坐标
var offsetWidth = 0;//当前拖拽的th的绝对宽度
function mousedown(){
if(draging) return;
draging = true;
dragElement = window.event.srcElement.parentNode;
offsetLeft = dragElement.offsetLeft;
document.body.style.cursor = "col-resize";
document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)
}
function mouseup(){
draging = false;
dragElement = null;
document.body.style.cursor = "auto";
document.body.onselectstart = function(){return true};
}
function mousemove(){
if(draging && dragElement){
var width = event.clientX-offsetLeft;
if(width>0){
dragElement.style.width = width;
offsetWidth = dragElement.offsetWidth;
}else{
dragElement.style.width = offsetWidth;
}
}
}
//创建<span class="dragable" onmousedown="mousedown();"> </span>
function createSpan(){
var span = document.createElement("span");
span.className = "dragable";
span.attachEvent("onmousedown",mousedown);
span.innerHTML = " ";
return span;
}
function init(){
//在th添加span
var ths = document.getElementsByTagName("th");
for(var i=0;i<ths.length;i++){
ths[i].appendChild(createSpan());
}
}
</script>
</head>
<body onload="init()" onmousemove="mousemove();" onmouseup="mouseup();">
<table id="mytable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width: 120px;">编号</th>
<th style="width: 120px;">姓名</th>
<th style="width: 120px;">年龄</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siuon</td>
<td>100</td>
<td>JavaEE工程师...</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript解析过程你真的清楚吗？？
- js----Number对象
- JS Map 和 List 的简单实现代码
- 10012---JavaScript--类型转换
- js----显示当前系统时间
- ［学习］JavaScript设计模式——Revealing Module（揭示模块）模式
- 10011---JavaScript--typeof,null,undefined
- JSP实现屏蔽浏览器缓存的方法
- JavaScript匿名函数之模仿块级作用域
- javascript性能优化之事件委托实例详解
- JavaScript文档碎片操作实例分析
- javascript性能优化之DOM交互操作实例分析
- ExtJS5的grid filter改造
- 符合Ext tree的全国城市列表json格式
- 支持导航滚动的Extjs实现
- 使用json取代传统的form提交
- Ext(www.extjs.com)使用感受
- Ext的form类型扩展（一）——TreeField
- 解决js对象的深度clone导致的递归死循环
- 微博@输入功能的ExtJS实现