【快速编程】jQuery操作表格行上下移动

原理：

1、根据jquery获取当前对象所在的首个行父节点

2、根据当前行对象获取相邻的前后两个同级行对象，利用after、before函数进行位置对调

注意事项：

1、首个对象和末尾行对象不支持越界操作

附加html和jquery代码

Html

<table>

<tr>

<td style="width:50px;
font-weight:300;">1</td>

<td style="width:50px;
font-weight:300;">a</td>

<td>

<a style="cursor:pointer" onclick="UP(this)">向上</a>

<a style="cursor:pointer" onclick="Down(this)">向下</a>

</td>

</tr>

<tr>

<td>2</td>

<td style="width:50px;
font-weight:300;">b</td>

<td>

<a style="cursor:pointer" onclick="UP(this)">向上</a>

<a style="cursor:pointer" onclick="Down(this)">向下</a>

</td>

</tr>

<tr>

<td>3</td>

<td style="width:50px;
font-weight:300;">c</td>

<td>

<a style="cursor:pointer" onclick="UP(this)">向上</a>

<a style="cursor:pointer" onclick="Down(this)">向下</a>

</td>

</tr>

<tr>

<td>4</td>

<td style="width:50px;
font-weight:300;">d</td>

<td>

<a style="cursor:pointer" onclick="UP(this)">向上</a>

<a style="cursor:pointer" onclick="Down(this)">向下</a>

</td>

</tr>

</table>

jQuery代码

<script type="text/javascript">

function UP(obj) {

TrOption(obj, 'up');

}

function Down(obj) {

TrOption(obj, 'down');

}

//公共移动的方法

function TrOption(obj, option)

{

var trobj = $(obj).closest("tr");

var pretr;

var minmax = 0;

if (option == "up")

{

pretr = trobj.prev("tr");

} else {

pretr = trobj.next("tr");

minmax=$(obj).closest("table").find("tr").length - 1;

}

if ($(obj).closest("table").find("tr").index(trobj) != minmax) {

var trobjindex = trobj.find("td:eq(0)").text();

var pretrindex = pretr.find("td:eq(0)").text();

trobj.find("td:eq(0)").text(pretrindex);

pretr.find("td:eq(0)").text(trobjindex);

if (option == "up") {

pretr.before(trobj);

} else {

pretr.after(trobj);

}

}

}

</script>