table-link
v1.3.0
Published
A simple way to add links on your tableish elements like tr, th and td.
Downloads
90
Readme
Table Link
The easiest way to add links in your table rows, cells or elements that are not anchors!
Yeah man... Html can't do that for you out of the box. And it's sad. Very sad.
Don't worry bro here is the solution:
Instalation
With npm:
npm install --save table-link
With bower:
bower install --save table-link
Or you can just download a ZIP.
Setup
Browserify
var TableLink = require('table-link');
Browser (Global)
<script src="table-link.min.js"></script>
Some CSS (Optional)
[data-href] {
cursor: pointer;
}
table [data-href]:hover,
table [data-href]:hover > * {
background-color: #AAB7D1; // Put whatever color you want... Or none.
}
Usage
In your table:
<tr data-href="http://google.com">
<td>Some random crazy data.</td>
</tr>
In your Javascript file:
TableLink.init();
// Soooooo simple...
You can make use of blank
and self
(default) for targeting the link:
<tr data-href="http://google.com" data-target="self">
<td>Some random crazy data.</td>
</tr>
<tr data-href="http://google.com" data-target="blank">
<td>Some random crazy data.</td>
</tr>
Using in other elements
Put the selector to find those as the first TableLink.init()
parameter like this:
TableLink.init('h1, div, span');
<h1 data-href="http://google.com"></h1>
<div data-href="http://google.com"></div>
<span data-href="http://google.com"></span>
Before and After events
The 'before' event can cancel the link opening by returning false.
The "element" argument is the delegate target, which can be td
, tr
, th
or any element that matches the selector, if it was passed.
The "target" argument is the real event target. The sencond can be used to see if the clicked element is the delegated element or some other element inside the delegated element.
TableLink.before(function(element, target) {
return confirm('Can i open this link?');
});
TableLink.before(function(element, target) {
// Cancel the action if the clicked element (maybe a cell inside a row[data-href])
// has the ```.no-link``` class.
return !target.classList.contains('no-link');
});
TableLink.after(function(element, target) {
console.log('The link was opened!');
});
License
This repository is under the MIT License