<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.hide {
display: none;
}
#d2 {
height: 300px;
600px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -150px
}
</style>
</head>
<body>
<div id="d1" class=" c1 hide"></div>
<div id="d2" class=" c1 hide"></div>
<div class="content">
<input type="button" class="create" value="新增">
<table border="1px">
<thead>
<tr class="title">
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="name">EGon</td>
<td class='fav'>街舞</td>
<td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
</tr>
<tr>
<td>2</td>
<td class="name">ALEX</td>
<td class='fav'>理发</td>
<td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
</tr>
<tr>
<td>3</td>
<td class="name">小强</td>
<td class='fav'>二人转</td>
<td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
</tr>
</tbody>
</table>
</div>
<!--<div>-->
<!--<p>姓名：<input type="text"></p>-->
<!--<p>爱好：<input type="text"></p>-->
<!--<p><input type="button" value="提交"><input type="button" value="取消"></p>-->
<!--</div>-->
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".create").on("click", function () {
$(".c1").removeClass("hide")
console.log("123")
$("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit' type='button' value='提交'><input class='cancle' type='button' value='取消'></p>");
console.log("456")
})
$("body").on("click", ".cancle", function () {
$(".c1").addClass("hide")
})
$("body").on("click", ".submit", function () {
if ($(".named").val() == "") {
var nameVal = $(".named").val();
var favVal = $(".fave").val();
var xuHao = parseInt($("tr:last").children().first().text()) + 1
console.log(xuHao, nameVal, favVal)
var trEle = document.createElement("tr");
$("tbody").append(trEle)
$(trEle).html("<td class='q1'></td>, <td class='q2' ></td> ,<td class='q3'></td> ,<td><input type='button' value='编辑'><input type='button' class='delete' value='删除'></td>");
$(".q1").text(xuHao);
$(".q2").text(nameVal);
$(".q3").text(favVal);
$(".c1").addClass("hide");
}
else {
var nameVal = $(".named").val();
var favVal = $(".fave").val();
}
})
$("body").on("click", ".delete", function () {
$(this).parent().parent().remove()
})
$("body").on("click", ".add", function () {
$(this).data("name", $(this).parent().siblings(".name").html());
console.log($(this).data("name"));
$(this).data("fav", $(this).parent().siblings(".fav").html());
console.log($(this).data("fav"));
$(".c1").removeClass("hide");
$("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit' type='button' value='提交'><input class='cancle' type='button' value='取消'></p>");
$(".named")[0].value = $(this).data("name");
$(".fave")[0].value = $(this).data("fav");
var nameVal = $(".named").val();
var favVal = $(".fave").val();
console.log(nameVal, favVal)
var a1 = $(this).parent().siblings(".name")
var a2 = $(this).parent().siblings(".fav")
// $(this).parent().siblings(".name").html(nameVal)
// $(this).parent().siblings(".fav").html(favVal)
console.log("888")
$("body").on("click", ".submit", function () {
var nameVal = $(".named").val();
var favVal = $(".fave").val();
a1.html(nameVal)
a2.html( favVal)
console.log(nameVal, favVal)
console.log("5555555")
$(".c1").addClass("hide");
})
})
</script>
</body>
</html>