Home > Developer > JavaScript
To hide table columns, the most common method is as follows:
Copy codeThe Code is as follows:
Td. style. display = "none ";
This method is extremely inefficient. For example, hiding a column in a table of thousands of rows takes about 1.4 milliseconds to execute on my notebook (P4 M 4000G, M memory), which is intolerable. For example, the following code:
Copy codeThe Code is as follows:
<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 type = "text/javascript"> <! --
//--------------------------------------------------------
// 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>
Unfortunately, google uses this code to hide columns in javascript.
In fact, we can quickly hide columns by setting the td or th width of the first row to 0.
Let's change the hideOrShowCol () function to the following code:
Copy codeThe Code is as follows:
Function hideOrShowCol (codecomx, isShow)
{
Var t1 = time2stamp ();//
Var table = tableBox. children [0];
Var tr = table. rows [0];
Tr. children [codecomx]. style. width = isShow? 200: 0;
Var t2 = time2stamp ();
Alert ("Time consumed:" + (t2-t1) + "millisecond ");
}
However, the hidden effect cannot be achieved only in this way. You also need to set the table and td styles as follows:
Copy codeThe Code is as follows:
<Style> <! --
Table
{
Border-collapse: collapse;
Table-layout: fixed;
Overflow: hidden;
}
Td
{
Overflow: hidden;
White-space: nowrap;
}
--> </Style> <style bogus = "1"> table
{
Border-collapse: collapse;
Table-layout: fixed;
Overflow: hidden;
}
Td
{
Overflow: hidden;
White-space: nowrap;
} </Style>
Test again, we found that hiding a column in a table with thousands of rows takes less than 15 milliseconds. In other words, createTable (10000) is used to create a ten-million-row table and then test the table. It only takes 60 milliseconds (the execution time in my notebook is used as a reference. In fact, most of you have a much higher computer configuration than my laptop, so the time is shorter.) The efficiency is very satisfactory.
Supplement:
According to impermanence's proposal, the code for colgroup processing is added. The strange thing is that, although the processing principle is the same, the processing time for colgroup is 140 milliseconds, Which is doubled. The reason is unclear.
Complete code:
Copy codeThe Code is as follows:
<Style> <! --
Table
{
Border-collapse: collapse;
Table-layout: fixed;
Overflow: hidden;
}
Td
{
Overflow: hidden;
White-space: nowrap;
}
--> </Style> <style bogus = "1"> table
{
Border-collapse: collapse;
Table-layout: fixed;
Overflow: hidden;
}
Td
{
Overflow: hidden;
White-space: nowrap;
} </Style>
<Body>
<Input type = button onclick = createTable () value = 'create a table: Use thead'>
<Input type = button onclick = createTable (1) value = 'create a table: Use colgroup'>
<Br>
<Input type = button onclick = hideCol (1) value = 'hide 2nd columns '>
<Input type = button onclick = showCol (1) value = 'display 2nd column'>
<Input type = button onclick = hideCol_fast (1) value = 'hide 2nd columns quickly '>
<Input type = button onclick = showCol_fast (1) value = 'show 2nd columns quickly '>
<Div id = tableBox> </div>
<Script type = "text/javascript"> <! --
Var tableRowsLen = 10000; // create a ten-Row Table
//--------------------------------------------------------
// Convert time to timestamp (MS)
Function time2stamp () {var d = new Date (); return Date. parse (d) + d. getMilliseconds ();}
//--------------------------------------------------------
// Create a table
Function createTable (isUseColGroup)
{
If (isUseColGroup) // use the colgroup label
{
Var str = "<table border = 1>" +
"<Colgroup>" +
"<Col width = 100/>" +
"<Col width = 200/>" +
"<Col width = 50/>" +
"<\/Colgroup>" +
"<Tbody> ";
}
Else
{
// Use thead label
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 <tableRowsLen; 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];
If (rowslen> 1001)
{
If (! Confirm ("operations on tables with more than 1000 rows will be performed, which will be very time-consuming (or even cause the browser to die ). \ N are you sure you want to continue? "))
Return;
}
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 ");
}
//--------------------------------------------------------
// Hide/show specified columns-fast
Function hideCol_fast (codecomx) {hideOrShowCol_fast (codecomx, 0 );}
Function showCol_fast (codecomx) {hideOrShowCol_fast (codecomx, 1 );}
//----------------------------
Function hideOrShowCol_fast (codecomx, isShow)
{
Var t1 = time2stamp ();//
Var table = tableBox. children [0];
Var thead = table. children [0]; // It may be thead, tbody, or colgroup.
If (thead. tagName. toLowerCase () = "colgroup") // special processing for colgroup
{
Var td = thead. children [codecomx];
}
Else
{
// Note: If the table does not have the thead and tbody labels, the table. children [0] Is tbody.
Var tr = thead. children [0];
Var td = tr. children [codecomx];
}
Td. style. width = isShow? 200: 0;
Var t2 = time2stamp ();
Alert ("Time consumed:" + (t2-t1) + "millisecond ");
}
//--------------------------------------------------------
CreateTable ();
// --> </Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
