动态建表的苦恼，求助！！！

用js动态的创建表格，貌似我现在逻辑上出了问题，想来想去也没能实现，痛苦中请求大神指点下迷津
好了不废话了，说问题，如下图：
<table id='tab'><tr><td>序号</td><td>明细</td></tr><tr><td>1</td><td><a href='javascript:void(0)' onclick='popping(this);'>查看</a><input type='hidden' value='张三@21@男#李四@22@男'></td></tr><tr><td>2</td><td><a href='javascript:void(0)' onclick='popping(this);'>查看</a><input type='hidden' value='菜一零@21@女'></td></tr></table><div id='show' style='display:none'><table id='tab2'><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></table></div>
function popping(a){
$("#show").show();
var arrs = $(a).next().val().split("#");
for(var i=arrs.length-1;i>=0;i--){
var spellString = '<tr><td>'+arrs[i].split('@')[0]+'</td><td>'+arrs[i].split('@')[1]+'</td><td>'+arrs[i].split('@')[2]+'</td></tr>';
$('#tab2').append(spellString);
}
}
这里边还有一句代码$('#tab2 tr').eq(0).nextAll().remove()
这句加在哪儿合适呢？寻觅答案中

解决方案 »

  1.   

    <script>
        function popping(a) {
            $("#tab2").html("");
            $("#show").show();
            var arrs = $(a).next().val().split("#");
            for (var i = arrs.length - 1; i >= 0; i--) {
                var spellString = '<tr><td>' + arrs[i].split('@')[0] + '</td><td>' + arrs[i].split('@')[1] + '</td><td>' + arrs[i].split('@')[2] + '</td></tr>';
                $('#tab2').append(spellString);
            }
        }
    </script><body>
        <form id="form1" runat="server">
            <div>
                <table id='tab'>
                    <tr>
                        <td>
                            序号</td>
                        <td>
                            明细</td>
                    </tr>
                    <tr>
                        <td>
                            1</td>
                        <td>
                            <a href='javascript:void(0)' onclick='popping(this);'>查看</a><input type='hidden'
                                value='张三@21@男#李四@22@男'></td>
                    </tr>
                    <tr>
                        <td>
                            2</td>
                        <td>
                            <a href='javascript:void(0)' onclick='popping(this);'>查看</a><input type='hidden'
                                value='菜一零@21@女'></td>
                    </tr>
                </table>
                <div id='show' style='display: none'>
                    <table id='tab2'>
                        <tr>
                            <td>
                                姓名</td>
                            <td>
                                年龄</td>
                            <td>
                                性别</td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </body>逻辑出了问题？不知道你指的是什么问题，具体点
      

  2.   

    其实就是我要加的那一句代码$('#tab2 tr').eq(0).nextAll().remove()
    不知道往哪儿放
    这里边动态创建tr后要删除之前创建的tr
      

  3.   

    直接放在function开头就行了，我测试了没问题<script>
        function popping(a) {
            $('#tab2 tr').eq(0).nextAll().remove();
            $("#show").show();
            var arrs = $(a).next().val().split("#");
            for (var i = arrs.length - 1; i >= 0; i--) {
                var spellString = '<tr><td>' + arrs[i].split('@')[0] + '</td><td>' + arrs[i].split('@')[1] + '</td><td>' + arrs[i].split('@')[2] + '</td></tr>';
                $('#tab2').append(spellString);
            }
        }
    </script>