Function set for creating and operating tables in a set of JS _ javascript skills

When AJAX is used, JavaScript is often used to operate the DOM. When a data list is involved, many tables are used. Here, a group function set is written to operate tables. Of course, there are still many shortcomings, but some simple operations are still very convenient. Stone. js
//************************************** ************************************ *******************
// Hide Columns
Function setHiddenRow (tb, iCol ){
For (I = 0; 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 Var tr = document. createElement ("tr ");
For (var j = 0; 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 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 Var td = document. createElement ("td ");
Tb. rows [I]. appendChild (td );
}
}
// Modify cell attributes in batches
Function cellsSetAttribute (oTable, attributeName, attributeValue ){
For (I = 0; I For (j = 0; 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



New document