See the following code and perform a test:
<Body>
<Input type = button onclick = hideCol (1) value = 'hide 2nd columns '>
<Input type = button onclick = showCol (1) value = 'display 2nd column'>
<Div id = tableBox> </div>
<Script>
//--------------------------------------------------------
// Convert time to timestamp (MS)
Function time2stamp () {var d = new Date (); return Date. parse (d) + d. getMilliseconds ();}
//--------------------------------------------------------
// Create a table
Function createTable (rowsLen)
{
Var str = "<table border = 1>" +
"<Thead>" +
"<Tr>" +
"<Th width = 100> col1 <\/th>" +
"<Th width = 200> col2 <\/th>" +
"<Th width = 50> col3 <\/th>" +
"<\/Tr>" +
"<\/Thead>" +
"<Tbody> ";
Var arr = [];
For (var I = 0; I <rowsLen; I ++)
{
Arr [I] = "<tr> <td>" + I + "1 <\/td> <td>" + I + "2 </td> <td>" + I + "3 <\/td> </tr> ";
}
Str + = arr. join ("") + "</tbody> <\/table>"; // you can use join () to quickly create strings.
TableBox. innerHTML = str; // generate a table
}
//--------------------------------------------------------
// Hide/show specified Columns
Function hideCol (codecomx) {hideOrShowCol (codecomx, 0 );}
Function showCol (codecomx) {hideOrShowCol (codecomx, 1 );}
//----------------------------
Function hideOrShowCol (codecomx, isShow)
{
Var t1 = time2stamp ();//
Var table = tableBox. children [0];
Var rowsLen = table. rows. length;
Var lastTr = table. rows [0];
For (var I = 0; I <rowsLen; I ++)
{
Var tr = table. rows [I];
Tr. children [codecomx]. style. display = isShow? "": "None ";
}
Var t2 = time2stamp ();
Alert ("Time consumed:" + (t2-t1) + "millisecond ");
}
//--------------------------------------------------------
CreateTable (1000); // create a thousand rows table
</Script>
Then modify the following settings for function hideOrShowCol:
Function hideOrShowCol (codecomx, isShow)
{
Var t1 = time2stamp ();//
Var table = tableBox. children [0];
Var rowsLen = table. rows. length;
Var lastTr = table. rows [0];
For (var I = 0; I <rowsLen; I ++)
{
Var tr = table. rows [I];
Tr. cells [codecomx]. style. display = isShow? "": "None ";
}
Var t2 = time2stamp ();
Alert ("Time consumed:" + (t2-t1) + "millisecond ");
}
Test: the speed is slower than 10%.