Table-Helper Example

Example:
myTable = new TableHelper();
myTable.AssignMenu( GetStdTableMenu() );
myTable.NewHeader();
myTable.AddCell("a")
myTable.AddCell("b")
myTable.NewRow()
myTable.AddCell("c d", {"colspan":"2"} )
myTable.NewRow()
myTable.AddCell( sysvar("_ULN[0]"))
myTable.AddCell("f")
document.write(myTable.flush())

Documentation

TableHelper

The class provides an easy to use HTML-Table Wrapper.
The class doesn't uses DOM-Functions, the result is plain HTML-Code.
First Step: Initiate the object

	myTable = new TableHelper();

TableHelper.AssignMenu( myMenu )
Table will popup passed Menu on left-click event. Furthermore the cursor changes to a hand if the mouse is over the table.


TableHelper.AddRaw(Content)
This function adds plain HTML code to the output of TableHelper. It is most commonly used to add the colgroup-Element to hint the browser about possible width of columns. That is important to minimize render flaws by the browser.

Example:
myTable = new TableHelper();
myTable.AssignMenu( GetStdTableMenu() );
myTable.AddRaw('<colgroup><col width=20%><col width=20%><col width=20%><col width=20%><col width=20%></colgroup>');
myTable.NewHeader();
....


TableHelper.NewHeader()
Function creates a new row but wraps <head> -Elements around.


TableHelper.NewRow([Element-Attributes])
Function creates an new row. Further calls to AddCell will use this new row.
The function also adds automatically the CSS-Style-Class "odd" to every odd row.

Example:

myTable = new TableHelper();
myTable.NewRow()
myTable.AddCell("a")
myTable.NewRow( {"class":"cssClassName"})
myTable.AddCell("b")

TableHelper.AddCell(Content, [Element-Attributes])
This function adds an td-Element to the current row

Example:

myTable.AddCell("content<b>!<b>",
		 {"class":"cssClassName", "attr2":"val2"})

Result: <td class="cssClassName" arg2="val2"> content<b>!<b> </td>


TableHelper.flush()
Returns the HTML code for the table. It can be passed directly to document.write.
Example:

document.write(myTabler.flush());
// or
document.getElementById("myDiv").innerHTML = myTabler.flush();

AddCellWithOverlib(Content, sOverlib)
Function adds a new cell to the current row.
Furthermore there is a tooltip with text sOverlib if the user hovers over the cell with the mouse.