程序博客网 > 网络推广职业规划面试

JQuery-tableDnD 拖拽的基本使用

来源：互联网发布：网络推广职业规划面试编辑：程序博客网时间：2024/05/17 07:08

在页面上导入js

jquery-1.3.2.min.js

jquery.tablednd_0_5.js

注意：一定要先导入jquery-1.3.2.min.js 否则出错。

·建table

<table id="table-1" cellspacing="0" cellpadding="2">

<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>

<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>

<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>

<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>

<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>

<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>

</table>

·插入js代码

<script type="text/javascript">

$(document).ready(function() {

$("#table-1").tableDnD();

});

</script>

·ok。

·例子

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

pageContext.setAttribute("basePath", basePath);

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript"

src="${basePath}common/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript"

src="${basePath}common/js/jquery.tablednd_0_5.js"></script>

<style type="text/css">

.aa {

background: #00FF99

}

.bb {

background: #0066FF

}

</style>

<script type="text/javascript">

$(document).ready(function() {

color();

$("#table-1").tableDnD({

onDrop:function(table,row){

var b = $(row).children().eq(0).text();

color();

}

});

});

function color()

{

var tbody = $("table[id='table-1'] tr");

tbody.each(function(index){

var cc = index%2;

if(0==cc)

{

$(this).removeClass();

$(this).addClass("aa");

}

else

{

$(this).removeClass();

$(this).addClass("bb");

}

});

}

</script>

</head>

<body>

<table id="table-1" cellspacing="0" cellpadding="2">

<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>

<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>

<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>

<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>

<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>

<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>

</table>

</body>

</html>

网络推广职业规划面试

网络推广职业规划面试

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子娃娃背着娃娃恐怖歌曲 bjd娃娃娃娃鱼图片娃娃脸娃娃屋野生娃娃鱼抓娃娃技巧娃娃菜卷娃娃图片粉丝娃娃菜抓娃娃晴天娃娃娃娃简笔画娃娃岛鬼娃娃花子娃娃鱼做法水果娃娃敬礼娃娃中国娃娃泥娃娃叶罗娃娃娃娃老师性娃娃娃娃图夹娃娃娃娃儿歌成人娃娃鬼娃娃娃娃照片娃娃解说儿歌娃娃可爱娃娃小娃娃图片 ds娃娃萌娃娃图片恐怖娃娃实体娃娃吧古装娃娃真人娃娃娃娃软件娃娃歌曲