表格增加删除

一丶

1.html

    <body>
        <input type="button" value="点击添加"  id="addnr">
        <input type="button" value="保存"  id="save">
        <table id="tab" border="1" align="center" style="text-align: center; border-color: aliceblue;  50%;" cellspacing="1">
        </table>
    </body>

2.js

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function(){
                var i=1;
                $("#addnr").click(function(){    
                    var tr='<tr id="'+i+'">'
                    +'<td><input type="text" name="nr'+i+'" value="'+i+'"/></td>'
                    +'<td><input type="text" value="'+(i+1)+'"/></td>'
                    +'<td><a href="#" onclick="Del('+i+')">删除</a></td>'
                    +'</tr>';
                    $('#tab').append(tr);
                    i++;
                });
                $("#save").on("click",function(){
                    var str="";
                      $('#tab tr').each(function(i){
                          $(this).children('td').each(function(j){
//                             alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
//                             if($(this).text()!="删除"){
//                                 str=str+$(this).text()+",";
//                             }
                             $(this).children('input').each(function(z){ 
                            　　str=str+$(this).val()+",";
                             })
                          });
                      });
                      alert(str)
                })
            });
            function Del(i){
               $("input[name='nr"+i+"']").parent().parent().remove();
            }
        </script>

作者：chenze
出处：https://www.cnblogs.com/chenze-Index/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
如果文中有什么错误，欢迎指出。以免更多的人被误导。