table-tr-href

Simple library with no dependencies that wrap <td> cell content in a <a> tag for an entire <tr> row

Table of Contents

• Demo
• Installation
• Usage
• Examples
• Style

Demo

Try it on JSFiddle

Installation

npm install --save table-tr-href

Usage

// This will create window.TableTrHref
const TableTrHref = require('table-tr-href')

Examples

You can force rendering a DOMElement:

// on document ready
document.addEventListener('DOMContentLoaded', function(){
    // This will look for tr[data-href] in document
    TableTrHref.init();
    // This will look for tr[data-href] in #my-table
    TableTrHref.init(document.getElementById('my-table'));
});

The example above will transform this html:

<table id="my-table">
    <tr>
        <th>Column A</th>
        <th>Column B</th>
    </tr>
    <tr data-href="/link1">
        <td>The entire row</td>
        <td>is a link</td>
    </tr>
    <tr data-href="/link2" data-target="_blank">
        <td>The entire row</td>
        <td>is a target _blank link</td>
    </tr>
</table>

Into:

<table>
<tr>
    <th>Column A</th>
    <th>Column B</th>
</tr>
<tr class="tth">
    <td><a href="/link1">The entire row</a></td>
    <td><a href="/link1">is a link</a></td>
</tr>
<tr class="tth">
    <td><a href="/link2" target="_blank">The entire row</a></td>
    <td><a href="/link2" target="_blank">is a target _blank link</a></td>
</tr>
</table>

Style

By default, <a> wrappers are:

tr.tth > td > a{
    display: block;
}

You can easily customize the hover color:

tr.tth:hover{
    background-color: #4d97ff;
}

Cancel default <a> style:

tr.tth > td > a{
    color: black;
    text-decoration: none;
}

If your <td> tags have padding (let's take 0.75rem for this exammple), you can apply it to the <a> tags instead:

tr.tth > td{
    padding: 0;
}
tr.tth > td > a{
    padding: 0.75rem;
}