我需要做一个表格增减的页面,表格是嵌套的,外层是天数,内层是天数的子层。天数可以增加,内层也可以增加,同时,内外层均支持不定顺序的删除。
1,初始状态
2,点击“增加一天”3次后的效果。
3,点击一次每一天右侧有个减号的按钮,将删除当前制定的这一天,下面的外层天数表格将提上来,并且变更天数顺序。
4,现在问题出现了,当我第2次点击减号按钮,这个顺序就出现问题了。
请教高手,应该如何。
1,初始状态
2,点击“增加一天”3次后的效果。
3,点击一次每一天右侧有个减号的按钮,将删除当前制定的这一天,下面的外层天数表格将提上来,并且变更天数顺序。
4,现在问题出现了,当我第2次点击减号按钮,这个顺序就出现问题了。
请教高手,应该如何。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript1.5" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript1.5" type="text/javascript">
function del()
{
$("[value=删除]").each(function(){
$(this).click(function(){
var count=$(this).attr("name");//获取即将被删除的数标
$(this).parent().parent().nextAll().each(function(i){
$(this).children().eq(0).text("第"+(parseInt(count)+i)+"天");//给TD重新赋值
$(this).children().find("[value=删除]").attr("name",(parseInt(count)+i));
});
$(this).parent().parent().remove();
});
});
}
$().ready(function(){
$("#new").click(function(){
var len=$("[value=删除]").length;
var len=len+1;
$("#table").append("<tr><td id=\"old\">第"+len+"天</td><td><input type=\"button\" value=\"删除\" name=\""+len+"\" /></td></tr>");
del();
});
});
</script>
</head><body>
<input type="button" id="new" value="新增" />
<table id="table">
<tr>
<td id="old">第1天</td><td><input type="button" value="删除" name="1" /></td>
</tr>
<table>
</body>
</html>
希望对你有所帮助
http://www.woaimami.com/Table.html
因为太长了,所以只有用网址了,JS我直接写在页面中的