Table column move using jQuery
一個好朋友問到，怎麼讓表格的欄位透過按上或按下的箭頭來上下移動
下面是臨時趕出來的範例
觀念是使用jQuery的Manipulation與Selection來作<tr>的移動
條件是<tr>上都要有id的屬性設定喔
如果用的tablib無法在tr上加設屬性的話
可以換成用class的方式做Selection....我就不多說啦~ :D
範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript">
$(function() {
$('#show').click(function(){
alert($('body').html());
});
});
function mvdown(id){
if($('#' + id).next().attr('id')){
var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
var p = $('#' + id).next();
$('#' + id).remove();
p.after(v);
}
}
function mvup(id){
if($('#' + id).prev().attr('id')){
var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
var p = $('#' + id).prev();
$('#' + id).remove();
p.before(v);
}
}
</script>
</head>
<body>
<table id = "tb" border="1" style="width:100%">
<tr id ="tr1" name="ttt">
<td>111</td><td>11111111111111</td><td><input type="button" value="down" onclick="mvdown('tr1')"/><input type="button" value="up" onclick="mvup('tr1')"/></td>
</tr>
<tr id ="tr2" name="ttt">
<td>222</td><td>22222222222222</td><td><input type="button" value="down" onclick="mvdown('tr2')"/><input type="button" value="up" onclick="mvup('tr2')"/></td>
</tr>
<tr id ="tr3" name="ttt">
<td>333</td><td>33333333333333</td><td><input type="button" value="down" onclick="mvdown('tr3')"/><input type="button" value="up" onclick="mvup('tr3')"/></td>
</tr>
<tr id ="tr4" name="ttt">
<td>444</td><td>44444444444444</td><td><input type="button" value="down" onclick="mvdown('tr4')"/><input type="button" value="up" onclick="mvup('tr4')"/></td>
</tr>
</table>
<input id="show" type="button" value="Show HTML" />
</body>
</html>
下面是臨時趕出來的範例
觀念是使用jQuery的Manipulation與Selection來作<tr>的移動
條件是<tr>上都要有id的屬性設定喔
如果用的tablib無法在tr上加設屬性的話
可以換成用class的方式做Selection....我就不多說啦~ :D
範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript">
$(function() {
$('#show').click(function(){
alert($('body').html());
});
});
function mvdown(id){
if($('#' + id).next().attr('id')){
var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
var p = $('#' + id).next();
$('#' + id).remove();
p.after(v);
}
}
function mvup(id){
if($('#' + id).prev().attr('id')){
var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
var p = $('#' + id).prev();
$('#' + id).remove();
p.before(v);
}
}
</script>
</head>
<body>
<table id = "tb" border="1" style="width:100%">
<tr id ="tr1" name="ttt">
<td>111</td><td>11111111111111</td><td><input type="button" value="down" onclick="mvdown('tr1')"/><input type="button" value="up" onclick="mvup('tr1')"/></td>
</tr>
<tr id ="tr2" name="ttt">
<td>222</td><td>22222222222222</td><td><input type="button" value="down" onclick="mvdown('tr2')"/><input type="button" value="up" onclick="mvup('tr2')"/></td>
</tr>
<tr id ="tr3" name="ttt">
<td>333</td><td>33333333333333</td><td><input type="button" value="down" onclick="mvdown('tr3')"/><input type="button" value="up" onclick="mvup('tr3')"/></td>
</tr>
<tr id ="tr4" name="ttt">
<td>444</td><td>44444444444444</td><td><input type="button" value="down" onclick="mvdown('tr4')"/><input type="button" value="up" onclick="mvup('tr4')"/></td>
</tr>
</table>
<input id="show" type="button" value="Show HTML" />
</body>
</html>