一、案例描述
创建元素
动态插入元素
删除元素
二、案例效果演示
三、案例整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格添加内容</title>
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#container {
padding: 50px;
}
table {
text-align: center;
}
.addBox {
/* border: 1px solid red; */
width: 200px;
margin-top: 50px;
}
input {
outline: none;
width: 100%;
border: none;
border: 1px solid #000;
height: 30px;
margin-bottom: 10px;
}
.add {
width: 100%;
height: 30px;
line-height: 30px;
background-color: green;
color: #fff;
text-align: center;
}
.del:hover {
color: red;
}
</style>
</head>
<body>
<div id="container">
<table border="1" cellspacing="0" width="200px">
<tr>
<th width="100px">水果名称</th>
<th width="50px">价格</th>
<th width="50px">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>4.5元</td>
<td><span class="del">删除</span></td>
</tr>
<tr>
<td>香蕉</td>
<td>1.5元</td>
<td><span class="del">删除</span></td>
</tr>
</table>
<div class="addBox">
<input type="text" placeholder="请输入水果名称" id="fruitName" /><br />
<input type="text" placeholder="请输入水果价格" id="fruitPrice" />
<div class="add">添加</div>
</div>
</div>
<script>
$(function() {
// 当点击添加按钮时, 将里面的内容获取到并创建tr, 然后插入到表格最下方。
$('.add').click(function() {
var $fruitName = $('#fruitName').val();
var $fruitPrice = $('#fruitPrice').val();
// console.log($fruitName);
// console.log($fruitPrice);
var tr = $('<tr><td>' + $fruitName + '</td><td>' + $fruitPrice + '</td><td><span class="del">删除</span></td></tr>');
$('table').append(tr);
$('#fruitName').val('');
$('#fruitPrice').val('');
// 坑:新创建的元素是没有绑定老事件的,我们需要自行绑定一个事件,以及她要干的事
tr.find(".del").click(function() {
$(this).parent().parent().remove();
});
});
// 删除按钮
$('.del').click(function() {
$(this).parents('tr').remove();
});
});
</script>
</body>
</html>