js表格,行之间的拖动
来源:互联网 发布:spss19.0数据分析教程 编辑:程序博客网 时间:2024/06/06 00:49
缺少js库文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
//表格排序
function tableSort()
{
var tbody = $('#homepage_carouse_table > tbody');
var rows = tbody.children();
var selectedRow;
var currentCol;
//压下鼠标时选取行
rows.mousedown(function(){
selectedRow = this;
currentCol = this.rowIndex;
tbody.css('cursor', 'move');
return false; //防止拖动时选取文本内容,必须和 mousemove 一起使用
});
rows.mousemove(function(){
return false; //防止拖动时选取文本内容,必须和 mousedown 一起使用
});
//释放鼠标键时进行插入
rows.mouseup(function(){
if(selectedRow)
{
if(selectedRow != this)
{
var insertCol = this.rowIndex;
if(insertCol <= currentCol){
$(this).before($(selectedRow)).removeClass('mouseOver');
}else{
$(this).after($(selectedRow)).removeClass('mouseOver');
}
//自己的代码
}
tbody.css('cursor', 'default');
selectedRow = null;
}
});
//标示当前鼠标所在位置
rows.hover(
function(){
if(selectedRow && selectedRow != this)
{
$(this).addClass('mouseOver'); //区分大小写的,写成 'mouseover' 就不行
}
},
function(){
if(selectedRow && selectedRow != this)
{
$(this).removeClass('mouseOver');
}
}
);
//当用户压着鼠标键移出 tbody 时,清除 cursor 的拖动形状,以前当前选取的 selectedRow
tbody.mouseover(function(event){
event.stopPropagation(); //禁止 tbody 的事件传播到外层的 div 中
});
}
</script>
</head>
<body onload="tableSort()">
<div class="table_con" align="center">
<table id="homepage_carouse_table">
<thead>
<tr class="tb_title" style="background:#eff3f5; height:45px; border-bottom:none}">
<td width="30%">标题</td>
<td width="40%">内容</td>
<td width="40%">时间</td>
</tr>
</thead>
<tbody>
<tr>
<td width="30%">鲜花</td>
<td width="30%">真漂亮</td>
<td width="40%">2016-10-31</td>
</tr>
<tr>
<td width="30%">包子</td>
<td width="30%">很好吃</td>
<td width="40%">2016-10-30</td>
</tr>
<tr>
<td width="30%">南京</td>
<td width="30%">不错的城市真漂亮</td>
<td width="40%">2016-10-29</td>
</tr>
<tr>
<td width="30%">面包</td>
<td width="30%">好难吃</td>
<td width="40%">2016-10-28</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- js表格,行之间的拖动
- 表格之间的行拖动
- js表格行拖动
- js源码--表格内容的拖动
- js表格拖动排序
- JS实现表格拖动
- EXTjs 拖动的应用,以及表格间行的拖动
- js可拖动表格列
- JS拖动改变表格列宽的实现
- js 鼠标拖动自由调节表格的列宽
- javascript实现的拖动表格行排序
- javascript实现的拖动表格行排序
- Html中表格行的拖动
- 表格列的拖动
- 可拖动的表格
- Extjs3 两个表格之间拖动数据
- 表格行拖动
- 表格行拖动
- 根据xsd文件生成java类
- android 动态申请权限
- 探寻C++最快的读取文件的方案
- Cocos2d-x中常用的宏小结
- windows系统下Python环境的搭建
- js表格,行之间的拖动
- saas
- maven中scope的作用
- android statelistdrawable基本设置
- Django:Model的Filter
- HDOJ 2105 The Center of Gravity(超级水题)
- Android Http请求方法汇总
- 关于直连线和交叉线(小记)
- 关于指针类型转换的思考