图片的话，可以自己随便搞3张，通过css设置一下3张图片的大小，在测试过程中，不要图片也可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
text-align: center;
margin-top: 20px;
margin-left: 300px;
}
img {
width: 100px;
}
</style>
<script>
window.onload = function () {
//删除一行
let btnlist = document.querySelectorAll('.delete');
for(var i =0;i<btnlist.length;i++){
btnlist[i].onclick = function () {
this.parentNode.parentNode.remove();
}
}
//全选全不选
$('all').οnclick=function () {
if($('all').checked){
let box = document.querySelectorAll('.chk');
for(let i = 0;i<box.length;i++){
box[i].checked=true;
}
}else {
let box = document.querySelectorAll('.chk');
for(let i = 0;i<box.length;i++){
box[i].checked=false;
}
}
}
//删除多个
$('deleteM').onclick = function () {
let box = document.querySelectorAll('.chk');
for(let i = box.length-1;i>=0;i--){
if (box[i].checked){
box[i].parentNode.parentNode.remove();
}
}
}
// 实现当下面的所有复选框被选中时，上面的全选也被选中
let box = document.querySelectorAll('.chk');
for (let i = 0;i<box.length;i++){
box[i].onclick =function () {
let count = 0;//计算被选中的个数
for(let j = 0; j<box.length;j++){
if(box[j].checked){
count++;
}
}
if(count == box.length){
$('all').checked=true;
}else{
$('all').checked=false;
}
}
}
}
function $(id) {
return document.getElementById(id)
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="10px" cellspacing="10px">
<thead>
<tr>
<th>全选<input type="checkbox" id="all"></th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品图片</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" name="" class="chk"></td>
<td>1001</td>
<td>美味辣条</td>
<td><img src="img/23.png"></td>
<td>￥9.8</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" class="chk">
</td>
<td>1002</td>
<td>运动鞋</td>
<td><img src="img/24.png"></td>
<td>￥399</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" class="chk">
</td>
<td>1003</td>
<td>毛衣</td>
<td><img src="img/maoyi.png"></td>
<td>￥298</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9">
<input type="button" id="deleteM" value="删除多个">
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
