Home > Article > Web Front-end > JavaScript is extremely fast. It only takes 60 milliseconds to hide/show table columns with 10,000 rows_javascript skills

JavaScript is extremely fast. It only takes 60 milliseconds to hide/show table columns with 10,000 rows_javascript skills

WBOYOriginal: 2016-05-16 18:54:461241browse

The most common way to hide table columns is as follows:

Copy code The code is as follows:

td .style.display = "none";

This method is extremely inefficient. For example, hiding a column of a thousand-row table takes about 4000 milliseconds to execute on my laptop (P4 M 1.4G, 768M memory), which is unbearable. For example, the following code:

Copy code The code is as follows:

< ;input type=button onclick=hideCol(1) value='Hide column 2'>

< ;div id=tableBox>

Unfortunately, we use javascript to hide columns from Google The method is to use such code.
In fact, we can quickly hide columns by setting the width of the first row's td or th to 0.
We change the hideOrShowCol() function to the following code:

Copy the code The code is 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) " Milliseconds"); 
}

However, this alone cannot achieve the hiding effect. You also need to set the table and td styles as follows:

Copy code The code is as follows:

Retesting, we found that it only takes less than 15 milliseconds to hide a column of a thousand-row table. Even if you use createTable(10000) to create a table with 10,000 rows, and then test it, it only takes 60 milliseconds (all based on the execution time on my laptop. In fact, most of your computer configurations are better than mine) The notebook is much taller, so the time will be shorter), and the efficiency is very satisfactory.
Supplement:
According to the suggestion of Wu Chang netizen, the code for colgroup processing has been added. The strange thing is that although the processing principle is exactly the same, the time to process colgroup reaches 140 milliseconds, which is doubled. It's unclear why.
Full code:

Copy code The code is as follows:

< ;/div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Let’s talk about the ideological premise of mastering the JavaScript language. Friends who want to learn js can take a look_Basic KnowledgeNext article：Let’s talk about the ideological premise of mastering the JavaScript language. Friends who want to learn js can take a look_Basic Knowledge

See more

JavaScript is extremely fast. It only takes 60 milliseconds to hide/show table columns with 10,000 rows_javascript skills

Related articles