
Builds table elements with methods to add rows quickly.
new HtmlTable([table, options]);
var myTable = new HtmlTable({ properties: { border: 1, cellspacing: 3 }, headers: ['fruits', 'colors'], rows: [ ['apple', 'red'], ['lemon', 'yellow'] ] }); myTable.inject($('someContainer')); //ALSO var myTable = new HtmlTable($('existingTable')); myTable.push(['data','goes','here']);
Inserts a new table row. To push several at once, see (see HtmlTable.pushMany)
myHtmlTable.push(row, rowProperties, target, tag, where);
td
or th
); defaults to td
.Element.inject
that specifies where the row is inserted relative to the specified target (before
, after
, top
, bottom
, etc)Row data can be in either of two formats. Note that they can be mixed and matched.
OR
Note that it can also be an actual TR element.
//example of 'simple' rows myTable.push(['value 1', 'value 2', 'value 3'], { 'class': 'tableRowClass' }); //new row //detailed rows myTable.push([ { //can specify data AND properties content: 'value 4', properties: { colspan: 2, 'class': 'doubleWide', style: '1px solid blue' } }, 'value 5' //can just be data; mixing and the two in the same row is fine ]); //RESULT: <table cellpadding="0" cellspacing="0" border="0"> <tr class="tableRowClass"> <td>value 1</td> <td>value 2</td> <td>value 3</td> </tr> <tr> <td colspan="2" class="doubleWide" style="1px solid blue">value 4</td> <td>value 5</td> </tr> </table>
{tr: theTableRow, tds: [td, td, td]}
Update a table row
myHtmlTable.update(tr, row);
Inserts a group of rows into the table.
myHtmlTable.push(rows, rowProperties, target, tag, where);
td
or th
); defaults to td
.Element.inject
that specifies where the row is inserted relative to the specified target (before
, after
, top
, bottom
, etc)//example of 'simple' rows myTable.push([ [1, 'one'], [2, 'two'], [3, 'three'] ], { 'class': 'tableRowClass' });
The above example would produce a table with 3 rows each with the class tableRowClass
.
Empties the tbody of the table.
myTable.empty();
Sets the contents of the header or footer.
myTable.set(what, rowArray);
If you pass an instance of HtmlTable into the $
or document.id
function
it will return the actual table Element.
document.id(myHtmlTable).setStyle('color', 'blue'); $(myHtmlTable) == myHtmlTable.table; // true
This class implements the following Element methods:
These will execute these methods on the table element.
Each method accepts exactly the same arguments as the Element equivalent.
myHtmlTable.inject(document.body); //same as: document.id(myHtmlTable).inject(document.body);
Extends the Element Type with a reference to its HtmlTable instance.
myElement.retrieve('HtmlTable'); //the instance of HtmlTable for the element
© Linux.ria.ua, 2008-2024 |