jquery实现表格增加/删除行的操作

2019独角兽企业重金招聘Python工程师标准>>>

<部分参考网上>  晕，再次编辑不能出效果了，无奈把演示删掉了，拷到本地再测试，记住要指定正确jquery.js的路径

	
		 
		
		
			$(document).ready(function (){
				$("#name").focus();
				$("#addBtn").click(function (){
					//alert("向表格中添加一行数据");
					var str = getNewRowStr();
					// alert(str);
					$("#table1").append(str);
					clearText();
				});
			});
			function delRow(index){
				//删除该行
				$("#tr" + index).remove();
			}
			function clearText(){
				$("#name").val("");
				$("#age").val("");
				$("#sex").val("");
				$("#name").focus();
			}
			function getNewRowStr(){
				//每次增加一行则len+1
				//var len = $("#table1 tr").length;
				var len = $("#table1").find("tr").length;
				var name = $("#name").val();
				var age = $("#age").val();
				var sex = $("#sex").val();
				var str = ''+ name +'' +sex+''+age
							+'';
				return str;
			}
		
	
	
		
			
				姓名：
				性别: 
				年龄: 
				
			
		
		
			
				姓名性别年龄
			
		
	

// 来自评论 整理的更好的方法：Script 改进（思路更清晰）
         
           $(document).ready(function (){
                //$("#name").focus(); input框输入内容然后刷新页面，input框内容还在(firefox)
                clearText(); // 改用clearText
                $("#addBtn").click(function (){ 
                    $("#table1").append(getNewRow()); 
                    clearText(); 
                });
                $("#table1").on('click', ".delBtn", function (){
                    $(this).parent().parent().remove();
                });
            }); 
            function clearText(){ 
                $("#name").val(""); 
                $("#age").val(""); 
                $("#sex").val(""); 
                $("#name").focus(); 
            }
            function getNewRow(){
                var btn = $("");
                var newRow = $("").append($("").append($("#name").val()))
                                        .append($("").append($("#age").val()))
                                        .append($("").append($("#sex").val()))
                                        .append($("").append(btn));
                return newRow; 
            }
        

转载于:https://my.oschina.net/cwzhang/blog/203393