Copy part of table

Question

I have a HTML table that I want to copy to the clipboard.
However, I don't want the header row to be copied, only the rest of the table.
This is the table:

<table style="width:100%" #table>
    <tr>
      <th class="border"></th>
      <th class="border"></th>
      <th class="border"></th>
      <th class="border"></th>
      <th class="border"></th>
      <th class="border"></th>
    </tr>
    <ng-template ngFor let-table [ngForOf]="mCase.Tables" let-i="index">
      <ng-template ngFor let-row [ngForOf]="table.rows" let-rowIndex="index">
        <tr>
          <td>
           ....
          </td>
        </tr>
      </ng-template>
    </ng-template>
  </table>

This is the Javascript I'm using to copy it:

 @ViewChild('table') table: ElementRef;

 var body = document.body as HTMLElement, range, sel;
if (document.createRange && window.getSelection) {
  range = document.createRange();
  sel = window.getSelection();
  sel.removeAllRanges();
  try {
    range.selectNodeContents(this.table.nativeElement);
    sel.addRange(range);
  } catch (e) {
    range.selectNode(this.table.nativeElement);
    sel.addRange(range);
  }
} else if (body.createTextRange) {
  range = body.createTextRange();
  range.moveToElementText(this.table.nativeElement);
  range.select();
}

document.execCommand("Copy");

This code copies all of the table.
How do I copy the table without the header row?

Check this: https://stackoverflow.com/questions/36328159/how-do-i-copy-to-clipboard-in-angular-2-typescript — Cruzer, Mar 18 '18 at 06:48
@vbRocks The problem isn't that the table isn't being copied, but that I want to copy only part of the table, without the header row. — amitairos, Mar 18 '18 at 06:49

Deekshith Hegde · Accepted Answer · 2018-03-18T08:19:32.583

1

Make use of <thead> and <tbody> in your <table> tags and just select only the <tbody>instead of selecting entire table.

Edit

DataTables solves this problem Find the detailed explanation here

You can check youtube link for DataTables

Header gets selected here too. However if you wish not to you can change as per your convenience. You should manipulate the below script

https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js

exportOptions: {},
        fieldSeparator: "\t",
        fieldBoundary: "",
        header: !0,
        footer: !1,
        title: "*",
        messageTop: "*",
        messageBottom: "*"

You can find these from lines 286-293 As you dont want headers change it to

 header: !1,

Use this new script after changing the line.

edited Mar 18 '18 at 08:19

answered Mar 18 '18 at 06:59

Deekshith Hegde

1,318
2
15
27

Thanks, but it now copies it only as plain text, where before it copied it as a table. – amitairos Mar 18 '18 at 07:13
Maybe there's a way to remove some of the selected range? – amitairos Mar 18 '18 at 07:25
Copying entire table. Does that mean even the table borders? – Deekshith Hegde Mar 18 '18 at 07:33
No, just the contents. I want to paste it into Excel, each cell in an Excel cell. My code copies the table this way. If I copy only tbody, it pastes it as text. – amitairos Mar 18 '18 at 07:36
Do you mind using a plugin that simplifies your task? – Deekshith Hegde Mar 18 '18 at 07:41
Sure. No problem. – amitairos Mar 18 '18 at 07:45
1

Probably i didn't notice DataTables also copies headers by default. So i have edited my answer so that only body part gets selected(no headers) – Deekshith Hegde Mar 18 '18 at 08:20

Copy part of table

1 Answers1