SOLVED 7/1/2022

My Final code which let me work with google sheet

 $(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();


              function copyTextToClipboard(text) {
                if (!navigator.clipboard) {
                  fallbackCopyTextToClipboard(text);
                  return;
                }
                navigator.clipboard.writeText(text).then(function () {
                  console.log('Async: Copying to clipboard was successful!');
                }, function (err) {
                  console.error('Async: Could not copy text: ', err);
                });
              }

              var text2copy = '=SPLIT("' + newMemberName + ',' + amoutName + ',' + bankName + '", ",")'
              copyTextToClipboard(text2copy);
            })

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

SOLVED 7/1/2022

My Final code which let me work with google sheet

 $(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();


              function copyTextToClipboard(text) {
                if (!navigator.clipboard) {
                  fallbackCopyTextToClipboard(text);
                  return;
                }
                navigator.clipboard.writeText(text).then(function () {
                  console.log('Async: Copying to clipboard was successful!');
                }, function (err) {
                  console.error('Async: Could not copy text: ', err);
                });
              }

              var text2copy = '=SPLIT("' + newMemberName + ',' + amoutName + ',' + bankName + '", ",")'
              copyTextToClipboard(text2copy);
            })

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

• javascript
• html
• jquery

2 Answers 2

To paste row values into a spreadsheet, create a ClipboardItem with mime type text/html and a table with one row containing the desired values (as a html string), then write that to the clipboard.

const spreadSheetRow = new Blob([value], {type: 'text/html'});
navigator.clipboard.write([new ClipboardItem({'text/html': spreadSheetRow})])

A Stackoverflow-snippet will not work here, because the Clipboard only works in a top level window/tab.

Here is a small (Stackblitz) snippet to play with. It copies the values of a row when it is clicked.

Small extension to KooiInc's answer that demonstrates pulling the html from the DOM and having a fallback value for paste target applications that don't support HTML

// Get the table element from the DOM
// (Use whatever method makes sense for locating your table element, e.g. document.querySelector('table'))
const tableElement = document.getElementById('yourTableElementId');

// Convert the table element to an HTML string
const tableHTMLString = tableElement.outerHTML;

// Convert the table element to plain text string
const plainTextString = tableElement.innerText;

navigator.clipboard.write([
    new ClipboardItem({
        'text/html': new Blob([tableHTMLString], {
            type: 'text/html',
        }),
        'text/plain': new Blob([plainTextString], {
            type: 'text/plain',
        }),
    }),
]);