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

最新推荐文章于 2019-10-11 13:58:11 发布

weixin_33890499

最新推荐文章于 2019-10-11 13:58:11 发布

阅读量100

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/cwzhang/blog/203393

版权

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

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(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 = '<tr id="tr' + len + '"><td>'+ name +'</td><td>' +sex+'</td><td>'+age
							+'</td><td><input id="delBtn" onclick="delRow(' + len + ')" type="button" value="删除" /></td></tr>';
				return str;
			}
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>姓名：<input type="text" id="name" value="" /></td>
				<td>性别: <input type="text" id="sex" value="" /></td>
				<td>年龄: <input type="text" id="age" value="" /></td>
				<td><input type="button" id="addBtn" value="添加一行"></td>
			</tr>
		</table>
		<table id="table1" border="1">
			<tr>
				<td>姓名</td><td>性别</td><td>年龄</td><td></td>
			</tr>
		</table>
	</body>
</html>

// 来自评论 整理的更好的方法：Script 改进（思路更清晰）
        <script type="text/javascript"> 
           $(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 = $("<input class='delBtn' type='button' value='删除' />");
                var newRow = $("<tr>").append($("<td>").append($("#name").val()))
                                        .append($("<td>").append($("#age").val()))
                                        .append($("<td>").append($("#sex").val()))
                                        .append($("<td>").append(btn));
                return newRow; 
            }
        </script>

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