如何将多个按钮选择添加到 Div

Question

所以我有一个带有按钮和匹配信息的表格，当我点击特定按钮时，我试图编写一个代码，它会将我的选择添加到 div(cart)，例如，如果我点击第一个按钮 (1.59) , 它应该将匹配的名称添加到购物车 (Arsenal-Chelsea) , 相关的选择 (Arsenal) OR Header Name (Home) 和 Value (1.59) 以这个顺序

阿森纳-切尔西 兵工厂 1.59

另外，当我重新点击同一个按钮 (1.59) 时，我需要它能够正常工作，它应该能够从购物车中删除选择

$(".nr").click(function() {
  var $item = $(this).closest("tr").find(".nr").val();
  $("#cart").append($item);
  $("#cart").append("<div class='cart' Id='cart'>");
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>

<div class="cart" Id="cart">
  <div class="title">Bet Slip</div>
  <chr/>
  <div id="sel"><span></span></div><br>
  <span>Selections:</span><br>
  <button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
  <thead>
    <tr class="ui-widget-header ">
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type=button class="nr" value="1.59"></td>
      <td><input type=button class="nr" value="3.40"></td>
      <td><input type=button class="nr" value="2.90"></td>
      </td>
    </tr>
    <tr>

      <td>Man United-Man City</td>
      <td><input type=button class="nr" value="2.70"></td>
      <td><input type=button class="nr" value="2.90"></td>
      <td><input type=button class="nr" value="2.50"></td>
      </td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type=button class="nr" value="3.60"></td>
      <td><input type=button class="nr" value="3.20"></td>
      <td><input type=button class="nr" value="1.95"></td>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要使用 DOM 遍历来查找与被点击的按钮相关的内容。要获取地点，您可以获取包含td 的索引，然后检索包含文本的匹配thead th。要获得匹配，您可以获取当前行中第一个 td 的文本。

添加新内容时，不要使用id 属性，因为它们必须是唯一的。

另外请注意，在以下示例中，我修复了您的 HTML 中的一些问题，例如额外的 </td> 标记和删除了不存在的 <chr /> 标记。

let $th = $('#choose-address-table thead th');

$(".nr").on('click', e => {
  let $btn = $(e.target);
  let $tr = $btn.closest('tr');
  let selectionIndex = $btn.closest('td').index();
    
  let match = $tr.find('td:first').text().trim();
  let result = $th.eq(selectionIndex).text().trim();
  let value = $btn.val();
  
  $("#cart").append(`<div class="cart">${match} ${result} ${value}</div>`);
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
  <div class="title">Bet Slip</div>
  <div id="sel"><span></span></div><br />
  <span>Selections:</span><br />
  <button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
  <thead>
    <tr class="ui-widget-header">
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type="button" class="nr" value="1.59"></td>
      <td><input type="button" class="nr" value="3.40"></td>
      <td><input type="button" class="nr" value="2.90"></td>
    </tr>
    <tr>
      <td>Man United-Man City</td>
      <td><input type="button" class="nr" value="2.70"></td>
      <td><input type="button" class="nr" value="2.90"></td>
      <td><input type="button" class="nr" value="2.50"></td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type="button" class="nr" value="3.60"></td>
      <td><input type="button" class="nr" value="3.20"></td>
      <td><input type="button" class="nr" value="1.95"></td>
    </tr>
  </tbody>
</table>