jquery 动态控制表格,添加,删除,上移,下移,排序

这个功能的实现主要运用了jquery  的遍历和DOM操作

.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。

.next()获得匹配元素集合中每个元素紧邻的同辈元素。

.find()获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。

.eq() 将匹配元素集合缩减为位于指定索引的新元素。

after()在匹配的元素之后插入内容。

before()在每个匹配的元素之前插入内容。

具体用法请访问W3C官网学习


效果图



源码:


<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>



  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值