| 91 |
rodolico |
1 |
/*
|
|
|
2 |
* Simple toggle for making a cell clickable on a row to show/hide it's siblings.
|
|
|
3 |
* To uss:
|
|
|
4 |
* - Add JavaScript file to your html
|
|
|
5 |
* - Add the class tableClass (defined below) to your table.
|
|
|
6 |
* ex: <table widht="100%" cellpadding="0" cellspacing="0" class="table trihilight otherclass">
|
|
|
7 |
*
|
|
|
8 |
* - Add the activatorClass to any cell that you wnat to be clickable.
|
|
|
9 |
* ex:
|
|
|
10 |
* <tr>
|
|
|
11 |
* <td class='activator'>Col 1</td>
|
|
|
12 |
* <td class='hidden'>Col 2</td>
|
|
|
13 |
* <td class='hidden'>Col 3</td>
|
|
|
14 |
* </tr>
|
|
|
15 |
*
|
|
|
16 |
* You can edit the default class names by changing the constants below.
|
|
|
17 |
*/
|
|
|
18 |
|
|
|
19 |
// Edit these strings to suit the class names used
|
|
|
20 |
const tableClass = "sibling-hide";
|
|
|
21 |
const activatorClass = "activator";
|
|
|
22 |
const hideClass = "hidden";
|
|
|
23 |
// End edit area
|
|
|
24 |
|
|
|
25 |
//Make sure the activator style shows that it can be clicked on.
|
|
|
26 |
var style = document.createElement('style');
|
|
|
27 |
style.type = 'text/css';
|
|
|
28 |
style.innerHTML = '.' + activatorClass + ':hover { cursor: pointer; } .' + hideClass + ' { display: none; }';
|
|
|
29 |
document.getElementsByTagName('head')[0].appendChild(style);
|
|
|
30 |
|
|
|
31 |
console.log("Script loaded.");
|
|
|
32 |
|
|
|
33 |
//Wait till the page is done loading...
|
|
|
34 |
document.addEventListener("DOMContentLoaded", function(){
|
|
|
35 |
var tables = document.getElementsByClassName(tableClass);
|
|
|
36 |
for (y = 0; y < tables.length; y++) {
|
|
|
37 |
var currentTable = tables[y];
|
|
|
38 |
var rows = currentTable.getElementsByTagName("tr");
|
|
|
39 |
for (i = 0; i < rows.length; i++) {
|
|
|
40 |
|
|
|
41 |
var currentRow = currentTable.rows[i];
|
|
|
42 |
var cols = currentRow.getElementsByTagName("td");
|
|
|
43 |
for (k = 0; k < cols.length; k++) {
|
|
|
44 |
var currentCol = cols[k];
|
|
|
45 |
if(currentCol.classList.contains(activatorClass)) {
|
|
|
46 |
var createClickHandler = function(col) {
|
|
|
47 |
return function() {
|
|
|
48 |
var siblings = col.parentElement.getElementsByTagName("td");
|
|
|
49 |
for(m = 0; m < siblings.length; m++) {
|
|
|
50 |
var currentSibling = siblings[m];
|
|
|
51 |
if(!currentSibling.classList.contains(activatorClass)) {
|
|
|
52 |
if(currentSibling.classList.contains(hideClass)) {
|
|
|
53 |
currentSibling.classList.remove(hideClass);
|
|
|
54 |
} else {
|
|
|
55 |
currentSibling.classList.add(hideClass);
|
|
|
56 |
}
|
|
|
57 |
}
|
|
|
58 |
}
|
|
|
59 |
}
|
|
|
60 |
};
|
|
|
61 |
currentCol.onclick = createClickHandler(currentCol);
|
|
|
62 |
};
|
|
|
63 |
}
|
|
|
64 |
}
|
|
|
65 |
}
|
|
|
66 |
});
|