javascript - 如何使用唯一事件克隆表的不同行

Question

制作一个订购应用程序。有一个 div，其中包含一个表格，其中包含所有产品的价格和一个用于选择它的按钮。第二个 div 包含选定的产品。因此，我克隆所选产品并将其放入第二个 div 中。它可以运行，但我必须为每个产品创建一个事件，并且我想使用按钮类名称创建一个独特的函数来执行此操作。

我尝试创建一个 for() 但没有结果，但我是一个 js 初学者，我的语法有问题

HTML

<h1>CHOOSE</h1>

<table id="starters">
          <tr>
            <th>PRODUCT</th>
            <th>PRICE</th>
            <th>ADD TO CART</th>
          </tr>
          <tr>
            <td>Cherry</td>
            <td>6</td>
            <td><button id="s1" class="item_button"></button></td>
          </tr>
          <tr>
            <td>Peach</td>
            <td>8</td>
            <td><button id="s2" class="item_button"></button></td>
          </tr>
          <tr>
            <td>Strawberry</td>
            <td>12</td>
            <td><button id="s3" class="item_button"></button></td>
          </tr>
          <tr>
            <td>Banana</td>
            <td>7</td>
            <td><button id="s4" class="item_button"></button></td>
          </tr>
          <tr>
            <td>Apple</td>
            <td>7</td>
            <td><button id="s5" class="item_button"></button></td>
        </tr>          
</table>

<h1>YOUR CHOICE</h1>   

<table id="products_cart">

</table>

JavaScript

var s0ne = document.getElementById('s1');
var sTwo = document.getElementById('s2');
var sThree = document.getElementById('s3');
var sFour = document.getElementById('s4');
var sFive = document.getElementById('s5');
let boxes = document.getElementById("starters")
let basket = document.getElementById("products_cart")

s0ne.onclick = function() {
  let clone = boxes.getElementsByTagName("tr")[1].cloneNode(true);
  basket.appendChild(clone);
}

sTwo.onclick = function() {
  let clone = boxes.getElementsByTagName("tr")[2].cloneNode(true);
  basket.appendChild(clone);
}

sThree.onclick = function() {
  let clone = boxes.getElementsByTagName("tr")[3].cloneNode(true);
  basket.appendChild(clone);  
}

sFour.onclick = function() {
  let clone = boxes.getElementsByTagName("tr")[4].cloneNode(true);
  basket.appendChild(clone);  
}

sFive.onclick = function() {
  let clone = boxes.getElementsByTagName("tr")[5].cloneNode(true);
  basket.appendChild(clone);  
}

Answer 1

考虑到您可以使用 jQuery:

let basket = document.getElementById("products_cart")

$('.item_button').on('click', function(e) {
 let target = $(e.currentTarget);
 let clone = target.parents('tr')[0].cloneNode(true);
 basket.appendChild(clone);
})

使用纯 JS，你可以这样做:

let basket = document.getElementById("products_cart")

let buttons = document.querySelectorAll('.item_button');

for (button of buttons) {
 button.addEventListener('click', cloneLine);
}

function cloneLine(e) {
 let td = e.target.parentNode;
 let tr = td.parentNode;
 let clone = tr.cloneNode(true);
 basket.appendChild(clone);
}