getTable is a simple jQuery Plugin for easy getting table cells that is positioned on horizontal line, vertical line or both lines that passes through the target cell.
- getTable gets horizontal line (row) and vertical line (col) of table. And it gets cells that is positioned on those lines. The handling cells that is positioned on horizontal line is supported by <tr> HTML tag, but vertical line is not supported by HTML.
- The cells that is extended by colspan/rowspan are parsed correctly. More lines pass through the extended cells (i.e. those cells catch more cells), and those cells are positioned on more lines (i.e. those cells are caught by more cells).
- The horizontal line (row) and vertical line (col) are discerned. getTable returns a jQuery object (or Array of those), therefore you can do anything you want to those.
- The table is parsed via DOM, it’s fast, correctly, and those data are cached.
1. INCLUDE JS FILES
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.gettable.min.js"></script>
2. HTML
<table class="sample-a" id="sample-1">
<tbody>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
</tbody></table>
3. JAVASCRIPT
$('#sample-1 td').hover(function()
// Get rows that include target cell.
rows = $(this).getTable('rows');
// Get cols that include target cell.
cols = $(this).getTable('cols');
// Get cells that is included in cross line (rows and cols) of target cell, and style those.
cells = $(this).getTable('xCells').css('backgroundColor', 'blue');
);4. METHODS
rows
rows = target.getTable('rows')
Return an Array that includes zero or more rows. The row is a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on a horizontal line. The cells in the row are sorted by position as from left to right, regardless of HTML source order. For example, row.eq(0) is leftmost cell like header.
The elements are selected according to the each elements that is included in current target jQuery object. The returned rows is one Array that includes all of those.
An element that is included in current target jQuery object is:
- table (<table> element)
All rows in this table are selected. - row (<tr> element)
This row itself is selected.
The cell elements in this row are not the same as cell elements in <tr> element, which includes cells that is extended by rowspan in previous <tr>. - cell (<td> or <th> element)
All rows that include this cell (i.e. horizontal lines that pass through this cell) are selected.
(If you want both rows and cols of cell, use xCells method.)
Example:
var hl; // keep to restore
$('td').hover(function()
hl = $(this).getTable('rows')[0].addClass('highlight');
, function()
hl.removeClass('highlight');
);
- section (<thead>, <tfoot> or <tbody> element)
All rows in this section are selected.
In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).
cols
cols = target.getTable('cols')
Return an Array that includes zero or more cols. The col is a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on a vertical line. The cells in the col are sorted by position as from top to bottom, regardless of HTML source order. For example, col.eq(0) is uppermost cell like header.
The elements are selected according to the each elements that is included in current target jQuery object. The returned cols is one Array that includes all of those.
An element that is included in current target jQuery object is:
- table, row, section (<table>, <tr>, <thead>, <tfoot> or <tbody> element)
All cols in this table are selected. - cell (<td> or <th> element)
All cols that include this cell (i.e. vertical lines that pass through this cell) are selected.
(If you want both rows and cols of cell, use xCells method.)
Example:
var hl; // keep to restore
$('td').hover(function()
hl = $(this).getTable('cols')[0].addClass('highlight');
, function()
hl.removeClass('highlight');
);
In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).
cells
cells = target.getTable('cells')
Return a jQuery object that includes zero or more cell (<td> or <th>) elements. The elements are selected according to the each elements that is included in current target jQuery object. The returnedcells is one jQuery object that includes all of those.
An element that is included in current target jQuery object is:
- table (<table> element)
All cells in this table are selected. - row (<tr> element)
All cells in this row are selected.
This is not the same as cell elements in <tr> element, which includes cells that is extended by rowspan in previous <tr>.
Example:
$('#targetRow').getTable('cells').css('backgroundColor', 'blue');
- cell (<td> or <th> element)
This cell itself is selected. - section (<thead>, <tfoot> or <tbody> element)
All cells in this section are selected.
In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).
xCells
cells = target.getTable('xCells')
Return a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on cross line (horizontal line and vertical line) that pass through the each elements that is included in current target jQuery object. The returned cells is one jQuery object that includes all of those. The first cell of that cells is current target. i.e. cells.eq(0) is a cell on the cross point.
The elements that is not cell (<td> or <th>) are ignored.
This is not the same as merged cells that is returned by rows method and cols method, xCellsmethod returns unique cells, duplicated elements are excluded.
The nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).
Example:
var hl; // keep to restore
$('td').hover(function()
hl = $(this).getTable('xCells').addClass('highlight');
, function()
hl.removeClass('highlight');
);
table
table = target.getTable('table')
Return a jQuery object that includes zero or more table (<table>) elements. The <table> elements that is included in current target jQuery object, and the <table> elements that have <tr>, <td>,<th>, <thead>, <tfoot> or <tbody> elements that is included in current target jQuery object are selected. The returned table is one jQuery object that includes all of those (duplicated elements are excluded).
5. INITIALIZE
target.getTable()
Parse the table, and cache those data.
You usually don’t need to call initialize method, because getTable parses it automatically when getTable met unknown table via other methods. And getTable caches those data, therefore parsing again is not needed.
The cases of initialize method is needed are:
- You want to make preparations in advance.
- You changed structure of the table that was already parsed.
If the element that is included in current target jQuery object is <table>, that table is parsed. If element is part of <table> (<tr>, <td>, <th>, <thead>, <tfoot> or <tbody>), the table that has those parts is parsed. i.e. these codes below are equals:
$('table#table1').getTable();
$('table#table1>tbody:eq(0)').getTable();
$('table#table1>tbody:eq(0)>tr:eq(0)').getTable();
getTable discern nested table correctly, therefore if td of only inner table is given, outer table is not parsed.
getTable - Easy getting table cells
No comments:
Post a Comment