jQuery实现增删改

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		tr{
			text-align: center;
			height: 40px;
			width: 100px;		
		}
		input{
			height: 40px;
			border: none;
			outline: none;
			width: 100px;
		}		
	</style>
</head>
<body>	
	<table id="tab" border="1" cellspacing="0" cellpadding="0" width="450" align="center">
		<tr><td colspan="5" align="center"><button id="add" class="btn">添加</button></td></tr>
		<tr><th>序号</th><th>姓名</th><th>爱好</th><th style="width: 100px;">修改</th><th style="width: 100px;">删除</th></tr>
	</table>	
</body>
<script type="text/javascript">
	var i=0,j=0,k=0,m=0;	
	$("#add").click(function(){ 
		i=$("tr").length-2;
		i++;
		$("#tab").append('<tr><td>'+i+'</td><td>'+'<input class="txt1" type="text"/>'+'</td><td>'+'<input class="txt2" type="text"/>'+'</td> <td><input id="xg" type="button"value="修改" /></td> <td><input id="del" type="button"value="删除" /></td></tr>')
	})
	$("#tab").on("click","#del",function(){
		k=$(this).parent().parent().index(); 
		var flag=confirm("确定要删除吗？");
		if(flag){
			$(this).parent().parent().remove();
			m=$("tr").length;			
			for (n=k;n<m;n++) {
				console.log(n-1);
				$("#tab tr").eq(n).children().eq(0).text(n-1);
			}
		}
	});
	
	$("#tab").on("blur","input[type=text]",function(){
		$(this).prop('disabled',true);
		$(this).css({'color':'red'})
	});
	
	$("#tab").on("blur",".txt2",function(){
		var bb=confirm("姓名："+$('.txt1').val() + "   爱好: "+$(this).val());
		if(!bb){
			$(".txt1").val("");
			$(this).val("");
		}
	});
	
	$("#tab").on("click","#xg",function(){
		$(this).parent().prevAll().children().prop('disabled',false);
//		alert("可以修改了！")
	});
</script>
</html>
猜你喜欢
