The most common way to hide a table column is as follows:
Copy Code code as follows:
Td.style.display = "None";
The efficiency of this approach is extremely low. For example, hiding a column of a thousand-row table, which takes about 4000 milliseconds to execute on my notebook (P4 M 1.4g,768m memory), is intolerable. For example, the following code:
Copy Code code as follows:
<body>
<input Type=button Onclick=hidecol (1) value= ' Hide 2nd column ' >
<input Type=button Onclick=showcol (1) value= ' show 2nd Column ' >
<div id=tablebox></div>
<script type= "Text/javascript" ><!--
//--------------------------------------------------------
Time to timestamp (milliseconds)
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>"; Quickly build strings with join (), very fast
tablebox.innerhtml = str; Build table
}
//--------------------------------------------------------
Hide/Show specified columns
function Hidecol (colidx) {hideorshowcol (colidx, 0);}
function Showcol (colidx) {Hideorshowcol (COLIDX, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function Hideorshowcol (COLIDX, 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[colidx].style.display = isshow? "": "None";
}
var t2 = Time2stamp ();
Alert ("Time Consuming:" + (T2-T1) + "millisecond");
}
//--------------------------------------------------------
CreateTable (1000); Create a thousand-row table
--></script>
Unfortunately, the way we Google out to hide columns in JavaScript is using this code.
In fact, we can quickly hide columns by setting the first line of TD or TH with a width of 0.
We change the Hideorshowcol () function to the following code:
Copy Code code as follows:
function Hideorshowcol (COLIDX, Isshow)
{
var T1 = Time2stamp (); //
var table = tablebox.children[0];
var tr = table.rows[0];
Tr.children[colidx].style.width = isshow? 200:0;
var t2 = Time2stamp ();
Alert ("Time Consuming:" + (T2-T1) + "millisecond");
}
However, this is not the only way to hide the effect, you also need to set table and TD style as follows:
Copy Code code 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>
Re-testing, we found that hiding a column in a thousand-row table only takes less than 15 milliseconds. Even if you use CreateTable (10000) to create thousands of rows of tables, and then to test, it only takes 60 milliseconds (all of which are referenced by the execution time on my notebook). In fact, most of you have a much higher computer configuration than my laptop, so the time is shorter and the efficiency is very satisfying.
Add:
According to the suggestion of the fickle netizen, add the code to the Colgroup processing. Oddly, the process is exactly the same, but the processing time for Colgroup is 140 milliseconds, or longer. It is not clear why.
Complete code:
Copy Code code 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 table: Using Thead ' >
<input Type=button onclick=createtable (1) value= ' CREATE table: Using Colgroup ' >
<br>
<input Type=button Onclick=hidecol (1) value= ' Hide 2nd column ' >
<input Type=button Onclick=showcol (1) value= ' show 2nd Column ' >
<input Type=button onclick=hidecol_fast (1) value= ' Fast hide 2nd column ' >
<input Type=button onclick=showcol_fast (1) value= ' Fast display 2nd column ' >
<div id=tablebox></div>
<script type= "Text/javascript" ><!--
var tablerowslen = 10000; Create a million-Line table
//--------------------------------------------------------
Time to timestamp (milliseconds)
function Time2stamp () {var d=new Date (); return Date.parse (d) +d.getmilliseconds ();}
//--------------------------------------------------------
Create a table
function CreateTable (isusecolgroup)
{
if (isusecolgroup)//using Colgroup label
{
var str = "<table border=1>" +
"<colgroup>" +
"<col width=100/>" +
"<col width=200/>" +
"<col width=50/>" +
"<\/colgroup>" +
"<tbody>";
}
Else
{
Using the 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>"; Quickly build strings with join (), very fast
tablebox.innerhtml = str; Build table
}
//--------------------------------------------------------
Hide/Show specified columns
function Hidecol (colidx) {hideorshowcol (colidx, 0);}
function Showcol (colidx) {Hideorshowcol (COLIDX, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function Hideorshowcol (COLIDX, Isshow)
{
var T1 = Time2stamp (); //
var table = tablebox.children[0];
var rowslen = table.rows.length;
var lasttr = table.rows[0];
if (Rowslen > 1001)
{
if (!confirm) is going to operate on more than 1000 rows, this can be time-consuming (and even cause the browser to die). Are you sure you want to continue? "))
Return
}
for (var i=0; i<rowslen; i++)
{
var tr = table.rows[i];
Tr.children[colidx].style.display = isshow? "": "None";
}
var t2 = Time2stamp ();
Alert ("Time Consuming:" + (T2-T1) + "millisecond");
}
//--------------------------------------------------------
Hide/Show specified columns-quick
function Hidecol_fast (colidx) {hideorshowcol_fast (colidx, 0);}
function Showcol_fast (colidx) {hideorshowcol_fast (COLIDX, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function Hideorshowcol_fast (COLIDX, Isshow)
{
var T1 = Time2stamp (); //
var table = tablebox.children[0];
var thead = table.children[0]; It could be thead or tbody, or it could be colgroup.
if (thead.tagName.toLowerCase () = = "Colgroup")//special handling for Colgroup
{
var td = Thead.children[colidx];
}
Else
{
Note: If the table does not have thead and tbody tags, then table.children[0] is tbody
var tr = thead.children[0];
var td = Tr.children[colidx];
}
Td.style.width = isshow? 200:0;
var t2 = Time2stamp ();
Alert ("Time Consuming:" + (T2-T1) + "millisecond");
}
//--------------------------------------------------------
CreateTable ();
--></script>
