@w0s/table-cell-ditto

Display table cells with ditto mark

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/table-cell-ditto": "...",
      "text-metrics": "..."
    }
  }
</script>
<script type="module">
  import TableCellDitto from '@w0s/table-cell-ditto';

  for (const tableElement of document.querySelectorAll('.js-table-cell-ditto')) {
    const tableCellDitto = new TableCellDitto(tableElement, {
      mark: '"',
      th: true,
    });
    tableCellDitto.convert();
  }
</script>

<table class="js-table-cell-ditto">
  <thead>
    <tr>
      <th>header cell</th>
      <th>header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>header cell</th>
      <td>data cell</td>
    </tr>
    <tr>
      <th>header cell</th>
      <td>data cell</td> <!-- This cell is replaced with an ditto mark -->
    </tr>
  </tbody>
</table>

NG cases

Complex tables are not supported.

NG case	Code example
Horizontal joins by colspan attribute (rowspan attribute is supported)	<td colspan="2">cell</td>
Cells with title attribute (it will be overwritten by this function)	<td title="Cell title">cell</td>
Table with different font sizes for different cells	<td style="font-size:16px">cell</td> <td style="font-size:20px">cell</td>
Table with <th> element columns not uniformly positioned	<tr><th></th><td></td><td></td></tr> <tr><th></th><th></th><td></td></tr>

Constructor

new TableCellDitto(
  thisElement: HTMLTableElement,
  options?: Option
)

Parameters

thisElement [required]

Target element

options.mark [optional]

Ditto mark (default: " )

options.th [optional]

Whether <th> elements are to be converted or not (default: false)

Methods

convert(): void

Replace with ditto mark

unConvert(): void

Stop replacing with ditto mark