使用格式将 html 表格复制到剪贴板

Question

This is my table, and I wish to copy the membername + bank + amount to clipboard while I click the copy_btn

<tbody id="pendingDepositTable">
      <tr>
        <td>
          <div class="d-flex align-items-center">
            <div class="table-user-name ml-3">
              <p class="mb-0 font-weight-medium">9</p>
            </div>
          </div>
        </td>
        <td>
          <a href="/profile/MS00001">
            MS00001
          </a>
        </td>
        <td>test bank</td>
        <td>123</td>
        <td>
          <div class="badge badge-inverse-warning"> pending </div>
        </td>
        <td>2022-01-04 16:13:58</td>
        <td>
          <a id="copy_btn" class="btn btn-success"><i class="mdi mdi mdi-content-duplicate"></i></a>
          <a href="/updateDepositStatus?depositID=9" class="btn btn-success"><i class="mdi mdi mdi-check-all"></i></a>
          <a href="/rejectDeposit?depositID=9" class="btn btn-danger"><i class="mdi mdi-close"></i></a>
        </td>
      </tr>
    </tbody>

<script>
            $(document).on('click', '#copy_btn', function () {
              var currentRow = $(this).closest("tr");
              var memberName = currentRow.find("td:eq(1)").text();
              newMemberName = $.trim(memberName.replace(/(\r\n|\n|\r)/gm, ""));
              var bankName = currentRow.find("td:eq(2)").text();
              var amoutName = currentRow.find("td:eq(3)").text();
              navigator.clipboard.writeText(newMemberName,bankName,amoutName）;

            })
          </script>

To be honest I have no idea may I do like this. the result I wish to get is after I press the copy button then I can paste in excel or google sheet like this

Answer 1

This snippets'code is meant to save the values of a row to a comma delimited string on the clipboard when clicked within a row. For security reasons this will only work in a top level tab/window of the browser.

To paste into a spreadsheet program you should check the documentation [of that program] ( for example ).

Here is a small (Stackblitz) snippet to play with. Click 'Open in new window' in the right upper corner to be able to copy to the clipboard.

 document.addEventListener(`click`, handle) function handle(evt) { if (evt.target.closest(`tr`)) { const values = [...evt.target.closest(`tr`).querySelectorAll(`td`)].map(td => td.textContent).join(`,`); console.clear(); navigator.clipboard.writeText(values).then( () => alert(`Success. Try pasting...`), err => console.log(`Must be done in a top level tab/window because:\n${err}`) ); } }

 <table> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> </tr> </thead> <tbody> <tr> <td>value 1</td> <td>value 2</td> <td>value 3</td> </tr> <tr> <td>value 4</td> <td>value 5</td> <td>value 6</td> </tr> </tbody> </table>