<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
background-color: #c7ffad;
width: 800px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
var htmlobj = $.ajax({
url: "Goods.txt",
async: false //如果async设置为：true，则不会等待ajax请求返回的结果，会直接执行ajax后面的语句。
});//返回的是请求的结果的对象
var result = htmlobj.responseText;
//字符串转换 成数组
var arr2 = result.split(",");
//回调函数callback
$.each(arr2, function (index, value) {
$("table").append("<tr><td><input type='checkbox' name='checkbox'></td><td>" + (index + 1) + "</td><td>" + value + "</td><td><img name='deleteItem' src='image2/1.png'></td></tr>");
});
$("#add").click(function () {
$("<tr><td></td><td>10</td><td>苹果" + new Date() + "</td></tr>").insertAfter($("#myTable tr:eq(1)"));
})
$("#delete").click(function () {
$("#myTable tr:eq(1)").remove();
});
$("#delete2").click(function () {
$("#myTable tr:last").remove();
});
$("#delete3").click(function () {
$("#myTable tr:eq(2)").remove();
});
$("img").click(function () {
$(this).parent().parent().remove();
})
$("#checkbox").on('click',function() {
$("input[name='checkbox']").prop("checked", this.checked); //prop() 方法设置或返回被选元素的属性和值。
});
$("input[name='checkbox']").on('click',function() {
var $subs = $("input[name='checkbox']");
$("#checkbox").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false); //filter过滤器：结果为false则被过滤掉，结果true则被保留
});
});
</script>
</head>
<body>
<p>显示数据：</p>
<table id="myTable" name="myTable">
<tr><th><input type="checkbox" id="checkbox">全选</input></th>
<th>序号</th>
<th>名称</th>
<th>删除</th>
</tr>
</table>
<input type="button" value="增加一行" id="add">
<br>
<p>删除数据：</p>
<input type="button" value="删除第1行" id="delete">
<input type="button" value="删除最后1行" id="delete2">
<input type="button" value="删除第2行" id="delete3">
<br>
<input type="button" value="删除用户勾选的行" id="delete4">
</body>
</html>运行结果：
