这个功能的实现主要运用了jquery 的遍历和DOM操作
.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.next()获得匹配元素集合中每个元素紧邻的同辈元素。
.find()获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
源码:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function addrow(id){
$("#"+id).append("<tr><td>1</td><td><input type=\"radio\" name=\"radio\"><td><input type=\"text\" value=\"\"/></td><td><input type=\"text\" value=\"\"/></td><td><input type=\"text\" value=\"\"/></td></tr>");
Sequence()
}
function deleterow(id)
{
//alert($("#"+id+" tr").find("input[name='radio']:checked").val());
var tr=$("#"+id+" tr").find("input[name='radio']:checked");
if(tr.val()=="on"){
tr.parent().parent().remove();
Sequence()
}
else{alert("请选择要删除的项");}
}
function toprow(id){
var tr=$("#"+id+" tr").find("input[name='radio']:checked");
var btr=tr.parent().parent();
var pretr=btr.prev();
if(tr.val()=="on"){
btr.after(pretr);
Sequence()
}
else{alert("请选择要上移的项")}
}
function bottomaddrow(id)
{
var tr=$("#"+id+" tr").find("input[name='radio']:checked");
var btr=tr.parent().parent();
var pretr=btr.next();
if(tr.val()=="on"){
btr.before(pretr);
Sequence();
}
else{alert("请选择要下移的项")}
}
function Sequence()
{
var tr=$("#table1").find("tr").length;
var xuhao=$("#table1").find("tr").find("td").eq("0");
for(var i=0;i<tr;i++)
{
$("#table1").find("tr").eq(i).find("td").eq("0").text(i+1);
}
}
</script>
</head>
<body>
<table id="table1" border="1" width="500" >
<tr><td>1</td><td><input type="radio" name="radio"></td><td><input type="text" value="0"/></td><td><input type="text" value="0"/></td><td><input type="text" value="0"/></td></tr>
</table>
<input type="button" value="添加" οnclick="addrow('table1')"/>
<input type="button" value="删除" οnclick="deleterow('table1')"/>
<input type="button" value="上移" οnclick="toprow('table1')"/>
<input type="button" value="下移" οnclick="bottomaddrow('table1')"/>
</body>
</html>