A set of functions for creating and operating tables in JavaScript.

Stone. js
//************************************** ************************************ *******************
// Hide Columns
Function setHiddenRow (tb, iCol ){
For (I = 0; I <oTable. rows. length; I ++ ){
Tb. rows [I]. cells [iCol]. style. display = oTable. rows [I]. cells [iCol]. style. display = "none "? "Block": "none ";
}
}
// Hide rows
Function setHiddenRow (tb, iRow ){
Tb. rows [iRow]. style. display = oTable. rows [iRow]. style. display = "none "? "Block": "none ";
}
// Create a table
Function createTable (id, rows, cells, tbid ){
Var tb = document. createElement ("table ");
Var tbody = document. createElement ("tbody ");
For (var I = 0; I <rows; I ++ ){
Var tr = document. createElement ("tr ");
For (var j = 0; j <cells; j ++ ){
Var cell = document. createElement ("td ");
Tr. appendChild (cell );
}
Tbody. appendChild (tr );
}
Tb. appendChild (tbody );
Tb. setAttribute ("id", tbid); // you can specify the ID of the created TABLE.
Document. getElementById (id). appendChild (tb );
}
// Insert text
Function insertText (tb, row, cel, text ){
Txt = document. createTextNode (text );
Tb. rows [row]. cells [cel]. appendChild (txt );
}
// Modify the text
Function updateText (tb, row, cel, text ){
Tb. rows [row]. cells [cel]. firstChild. nodeValue = text;
}
// Add a subnode
Function toAppendChild (tb, row, cel, child ){
Tb. rows [row]. cells [cel]. appendChild (child );
}
// Delete a row
Function removeRow (tb, row ){
Tb. lastChild. removeChild (tb. rows [row]);
}
// Set cell attributes
Function cellSetAttribute (tb, row, col, attributeName, attributeValue ){
Tb. rows [row]. cells [col]. setAttribute (attributeName, attributeValue );
}
// Add listeners to cells
Function cellAddListener (tb, row, cel, event, fun ){
If (window. addEventListener)
{
// Event code of other browsers: Mozilla, Netscape, and Firefox
// The Order of the added events is the execution sequence. // note that you can use addEventListener to add events with on instead of on.
// Img. addEventListener ('click', delRow (this), true );
Tb. rows [row]. cells [cel]. addEventListener (event, fun, true );
}
Else
{
// Add the add method to the original IE Event code
// Img. attachEvent ('onclick', delRow (this ));
Tb. rows [row]. cells [cel]. attachEvent ("on" + event, fun );
}
}
// Add a row
Function insertRow (oTable ){
Var tr = document. createElement ("tr ");
For (I = 0; I <oTable. rows [0]. cells. length; I ++ ){
Var td = document. createElement ("td ");
Tr. appendChild (td );
}
OTable. lastChild. appendChild (tr );
}
// Set attributes for rows
Function rowSetAttribute (tb, row, attributeName, attributeValue ){
Tb. rows [row]. setAttribute (attributeName, attributeValue );
}
// Add a listener to the row
Function rowAddListener (tb, row, event, fun ){
If (window. addEventListener)
{
// Event code of other browsers: Mozilla, Netscape, and Firefox
// The Order of the added events is the execution sequence. // note that you can use addEventListener to add events with on instead of on.
// Img. addEventListener ('click', delRow (this), true );
Tb. rows [row]. addEventListener (event, fun, true );
}
Else
{
// Add the add method to the original IE Event code
// Img. attachEvent ('onclick', delRow (this ));
Tb. rows [row]. attachEvent ("on" + event, fun );
}
}
// Add a column
Function addCells (tb ){
For (I = 0; I <tb. rows. length; I ++ ){
Var td = document. createElement ("td ");
Tb. rows [I]. appendChild (td );
}
}
// Modify cell attributes in batches
Function cellsSetAttribute (oTable, attributeName, attributeValue ){
For (I = 0; I <oTable. rows. length; I ++ ){
For (j = 0; j <oTable. rows [I]. cells. length; j ++ ){
OTable. rows [I]. cells [j]. setAttribute (attributeName, attributeValue );
}
}
}
// Merge only supports one-way merge
// Merge rows
Function mergerRow (tb, row, cell, num ){
For (var I = (row + 1), j = 0; j <(num-1); j ++ ){
Tb. rows [I]. removeChild (tb. rows [I]. cells [cell]);
}
Tb. rows [row]. cells [cell]. setAttribute ("rowspan", num );
// Document. getElementById ('C'). innerHTML = document. getElementById ('U'). innerHTML;
}
// Merge Columns
Function mergerCell (tb, row, cell, num ){
For (var I = (cell + 1), j = 0; j <(num-1); j ++ ){
Tb. rows [row]. removeChild (tb. rows [row]. cells [I]);
}
Tb. rows [row]. cells [cell]. setAttribute ("colspan", num );
// Document. getElementById ('C'). innerHTML = document. getElementById ('U'). innerHTML;
}
Test DEMO
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus"/>
<Meta name = "author" content = ""/>
<Meta name = "keywords" content = ""/>
<Meta name = "description" content = ""/>
<Style>
. Testclass {background-color: yellow ;}
</Style>
<Script type = "text/javascript" src = "stone. js"> </script>
<Script type = "text/javascript">
<! --
Function giveText (){
For (var I = 0; I <5; I ++ ){
For (var j = 0; j <5; j ++ ){
InsertText (mytable, I, j, I * 5 + j );
}
}
}
Function addInput (){
Var input = document. createElement ("input ");
Input. setAttribute ("type", "text ");
Input. setAttribute ("value", "I am adding ");
ToAppendChild (mytable, 3, 3, input );
}
Function listen (){
Alert ('Congratulations! Listener installed successfully! ');
}
// -->
</Script>
</Head>
<Body>
Test Table functions <br/>
<Div id = "u">
</Div>
<Input type = "button" value = "Create a 5x5 Table" onclick = "createTable ('U', 5, 5, 'mytable');"/>
<Input type = "button" value = "show table borders" onclick = "document. getElementById ('mytable'). setAttribute ('border', 1);"/>
<Input type = "button" value = "insert text" onclick = "giveText ();"/>
<Input type = "button" value = "Modify text" onclick = "updateText (mytable, 3, 3, 'text')"/> <br/>
<Input type = "button" value = "add subnode input" onclick = "addInput ();"/>
<Input type = "button" value = "Delete row 5th" onclick = "removeRow (mytable, 4);"/>
<Input type = "button" value = "set cell width" onclick = "cellSetAttribute (mytable, 'width', '50')"/>
<Input type = "button" value = "add cell listener" onclick = "cellAddListener (mytable, 2, 2, 'click', listen)"/> <br/>
<Input type = "button" value = "Row merge" onclick = "mergerRow (mytable, 2, 1, 2); document. getElementById ('U '). innerHTML = document. getElementById ('U '). innerHTML; "/>
<Input type = "button" value = "column merge" onclick = "mergerCell (mytable, 1, 2, 3); document. getElementById ('U '). innerHTML = document. getElementById ('U '). innerHTML; "/>
<Input type = "button" value = "set cell background color" onclick = "cellsSetAttribute (mytable, 'class', 'testclass'); document. getElementById ('U '). innerHTML = document. getElementById ('U '). innerHTML; "/>
<Input type = "button" value = "set row height" onclick = "rowSetAttribute (mytable, 2, 'height', '50');"/> <br/>
<Input type = "button" value = "add 4th row listener" onclick = "rowAddListener (mytable, 3, 'click', listen);"/>
<Input type = "button" value = "add a row" onclick = "insertRow (mytable);"/>
<Input type = "button" value = "add column" onclick = "addCells (mytable);"/>
</Body>
</Html>
Test: