圖片的話，可以自己隨便搞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>
