获取所有选定行的表格单元格的内容

Question

我有一张用户信息表。当您单击按钮时，我想从每个选定的行中获取电子邮件地址，输出到以逗号分隔的字符串中。

<table>
   <tr>
      <td><input type="checkbox" class="selector"></td>
      <td class="name">John Doe</td>
      <td class="country">Australia</td>
      <td class="email">[email protected]</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="selector"></td>
      <td class="name">Jane Smith</td>
      <td class="country">Canada</td>
      <td class="email">[email protected]</td>
    </tr>
</table>

<button onclick="tableToEmail()">Get Emails</button>

我让它与以下代码一起工作，但我是 JS 新手，所以我认为它一定效率低下：

function tableToEmail() {

  var recipients = [];
  $('input.selector:checked').each(function(){
      var email = $(this).closest('tr').find('.email');
      recipients.push(email.text());
  });
  console.log(recipients.join(','));

}

是否有更好的方法来实现这一点，如果不需要 jQuery，最好使用 vanilla JS？

谢谢！

Answer 1

这是使用事件监听器的普通版本

window.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('table tbody')
  document.getElementById('tableToEmailButton').addEventListener('click', () => {
    const emails = Array.from(table.querySelectorAll('.selector:checked'))
      .map(chk => chk.closest('tr').querySelector('.email').textContent.trim());
    console.log(emails);
  });
});

<table>
<tbody>
   <tr>
      <td><input type="checkbox" class="selector"></td>
      <td class="name">John Doe</td>
      <td class="country">Australia</td>
      <td class="email">[email protected]</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="selector"></td>
      <td class="name">Jane Smith</td>
      <td class="country">Canada</td>
      <td class="email">[email protected]</td>
    </tr>
    <tbody>
</table>

<button id="tableToEmailButton">Get Emails</button>