<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<form align="center">
姓名:<input type="text" id="name"/>
班级:<input type="text" id="clazz"/>
学号:<input type="text" id="shcool"/>
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
<input type="button" id="save" value="保存">
<input type="button" id="allEdit" value="确认修改">
<input type="hidden" id="yincang">
<br>
<br>
<table border="1px solid black" cellspacing="0px" align="center" cellpadding="15px">
<thead>
<th>序号</th>
<th>姓名</th>
<th>班级</th>
<th>学号</th>
<th>性别</th>
<th>删除</th>
<th>编辑</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</form>
<script>
var i = 0
var aff = []
var tbody = $("#tbody")
var save = $("#save")
save.on("click",function(){
i++;
aff.push(i)
var tr = $("<tr></tr>")
var td0 = $("<td>" + i + "</td>")
var td1 = $("<td>" + $("#name").val() + "</td>")
var td2 = $("<td>" + $("#clazz").val() + "</td>")
var td3 = $("<td>" + $("#shcool").val() + "</td>")
var td4 = $("<td>" + $("#sex").val() + "</td>")
var td5 = $("<td>" + "<input type='button' value='删除' id='delete'>" + "</td>")
var td6 = $("<td>" + "<input type='button' value='修改' id='edit'>" + "</td>")
tbody.append(tr)
tr.append(td0).append(td1).append(td2).append(td3).append(td4).append(td5).append(td6)
//动态绑定删除按钮
td5.on("click","#delete",function(){
$(this).parent().parent().remove()
aff.pop()
for(i = 0; i < aff.length; i++){
$("#tbody").children().eq(i).children().eq(0).html(aff[i]);
}
})
//编辑按钮
//先取到表格里的HTML
//再把取到的文本写到表单里面
td6.on("click","#edit",function(){
$("#name").val($(this).parent().parent().children().eq(1).html())
$("#clazz").val($(this).parent().parent().children().eq(2).html())
$("#shcool").val($(this).parent().parent().children().eq(3).html())
$("#sex").val($(this).parent().parent().children().eq(4).html())
$("#yincang").val($(this).parent().parent().children().eq(0).html())
$("#allEdit").on("click",function(){
for(var i = 0; i < $("#tbody").children().length; i++){
if($("#tbody").children().eq(i).children().eq(0).html() == $("#yincang").val()){
$("#tbody").children().eq(i).children().eq(1).html($("#name").val())
$("#tbody").children().eq(i).children().eq(2).html($("#clazz").val())
$("#tbody").children().eq(i).children().eq(3).html($("#shcool").val())
$("#tbody").children().eq(i).children().eq(4).html($("#sex").val())
}
}
})
})
})
</script>
</body>
</html>