<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>
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>
|
new TableCellDitto(
thisElement: HTMLTableElement,
options?: Option
)
-
thisElement
[required] - Target element
-
options.mark
[optional] - Ditto mark (default:
"
) -
options.th
[optional] - Whether
<th>
elements are to be converted or not (default:false
)
convert(): void
- Replace with ditto mark
unConvert(): void
- Stop replacing with ditto mark