JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<button class="btn-csv">CSVダウンロード</button>
<table class="search-result-table">
  <thead>
    <tr>
      <th>操作対象</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" value="浜松太郎"></td>
      <td>浜松太郎</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="浜松次郎"></td>
      <td>浜松次郎</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="浜松三郎"></td>
      <td>浜松三郎</td>
    </tr>
  </tbody>
</table>

CSS

table, td, th {
  border: solid 2px;
  text-align: center;
}
input {
  transform: scale(1.5);
}

JavaScript

document.querySelector('.btn-csv').addEventListener('click', function(){
  const checked = [];
  document.querySelectorAll('.search-result-table input').forEach(el => {
    if(el.checked){
      checked.push(el.value);
    }
  });
  alert(checked.join(',') + 'のCSVダウンロードを実行')
});