表格增加删除
一丶
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; width: 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/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |