<!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>
