·在頁面上導入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>
|