我需要做一个表格增减的页面,表格是嵌套的,外层是天数,内层是天数的子层。天数可以增加,内层也可以增加,同时,内外层均支持不定顺序的删除。
1,初始状态
2,点击“增加一天”3次后的效果。
3,点击一次每一天右侧有个减号的按钮,将删除当前制定的这一天,下面的外层天数表格将提上来,并且变更天数顺序。
4,现在问题出现了,当我第2次点击减号按钮,这个顺序就出现问题了。
请教高手,应该如何。

解决方案 »

  1.   

    写了一个范例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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>
    希望对你有所帮助
      

  2.   

    源码在这里,主要的难点是表格是嵌套的。
    http://www.woaimami.com/Table.html
    因为太长了,所以只有用网址了,JS我直接写在页面中的