1, a form (explicit)
2, a modal box (implicit): functions responsible for adding and editing data
3, forms have add, edit, delete buttons
requirements and questions:
adding and editing functions share a common modal box, so how to differentiate data submission between these two functions
PS; I put the code on codepen. If it is convenient, you can move to this portal: https://codepen.io/mengjielee.
. < H2 > Source code < / H2 ><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clone</title>
<style>
* {
margin:0;
padding:0;
}
.wrapper {
background:rgba(0,0,0,.6);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.modal {
position:absolute;
top:50%;
left:50%;
width:200px;
height:300px;
margin-top:-150px;
margin-left:-100px;
background: silver;
text-align: center;
}
.hide {
display: none;
}
</style>
</head>
<body>
<!---->
<button id="add"></button>
<!---->
<table border="1">
<thead>
<tr>
<th>-sharp</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>lmj</td>
<td>swim</td>
<td>
<input type="button" class="edit" value="">
<input type="button" class="del" value="">
</td>
</tr>
<tr>
<td>2</td>
<td>cly</td>
<td>loving</td>
<td>
<input type="button" class="edit" value="">
<input type="button" class="del" value="">
</td>
</tr>
</tbody>
</table>
<!---->
<div class="wrapper hide">
<div class="modal">
<input type="text" id="uname">
<input type="text" id="uhabby">
<input type="submit" id="handle" value="">
<input type="submit" id="cancle" value="">
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
//
$("-sharpadd").click(function () {
$(".wrapper").removeClass("hide");
});
//
$("-sharphandle").click(function () {
//
var unameVal = $("-sharpuname").val();
var uhobbyVal = $("-sharpuhabby").val();
// :
var $clEle = $("tbody tr:first").find("td:last").clone(true);
//
//
var $curEle = $("table tr:last");
var indexVal = $($curEle.find("td")[0]).text();
indexVal = Number(indexVal) + 1;
//
// var indexVal = $("table tr").length;
//
var newEle = document.createElement("tr");
$(newEle).html("<td><td><td><td>");
//
$(newEle).insertAfter($curEle);
//
$($(newEle)).find("td:first").text(indexVal);
$($(newEle)).find("td").eq(1).text(unameVal);
$($(newEle)).find("td").eq(2).text(uhobbyVal);
$($(newEle)).find("td:last").html($clEle.html());
$("-sharpuname").val("");
$("-sharpuhabby").val("");
$(".wrapper").addClass("hide");
});
//
$("-sharpcancle").click(function () {
$("-sharpuname").val("");
$("-sharpuhabby").val("");
$(".wrapper").addClass("hide");
});
//
$(".edit").click(function () {
//
$(".wrapper").removeClass("hide");
// tr
// console.log($(this).parents().eq(1));
var $tdEles = $(this).parents().eq(1).find("td");
//
// console.log($tdEles.eq(1).text());
// console.log($tdEles.eq(2).text());
$("-sharpuname").val($tdEles.eq(1).text());
$("-sharpuhabby").val($tdEles.eq(2).text());
});
//
$(".del").click(function () {
// tr
// console.log($(this).parents().eq(1));
$(this).parents().eq(1).remove();
});
</script>
</body>
</html>