我有很多行的 html 页面(大约 40000)
<html><body>
<table id="t1">
<tr id="r1" name="1"><td>row 1</td></tr>
<tr id="r2" name="1"><td>row 2</td></tr>
....
<tr id="r50000" name="3"><td>row 30000</td></tr>
</table></body></html>
我需要一种快速的方法来隐藏/显示具有指定名称的行集(10 000 或 20 000)。平台要求:IE8-9 和 Mozila Firefox。我使用了很多方法:使用 tbody、 block 标签、隐藏行，并停在一个位置:循环排行并隐藏/显示它:
curLevel=root.getAttribute("Name");
var nextElement=curElement.nextElementSibling;
while(nextElement!=null)
{
curElement=nextElement;
nextElement=curElement.nextElementSibling;
if(curElement.tagName=="TR")
{
i++;
childLevel=curElement.getAttribute("Name");
if(childLevel<=curLevel)
break;
curElement.style.display = blockStyle;
}
}
但是这个方法很慢!!耗时约2分钟...
循环进行得很快，最慢的部分是 curElement.style.display = blockStyle; 它每次都重新绘制文档。
我可以更改选择行的显示样式然后显示更改吗？
附言没有 jQuery
最佳答案
可能最快的方法是使用 CSS 规则，可以添加和删除规则，也可以修改规则。由于您希望隐藏的行有一个通用名称，因此您可以使用以下等价物来隐藏名称为“1”的行:
tr[name="1"]{
display: none;
}
并删除规则以显示它们。下面展示了如何做到这一点。
// Object to hold functions for adding and removeing style rules
var myStyles = (function() {
// Use the first style sheet for convenience
var sheet = document.styleSheets[0];
// Delete a rule from sheet based on the selector
function deleteRule(selector) {
// Get rules
var rules = sheet.rules || sheet.cssRules; // Cover W3C and IE models
// Search for rule and delete if found
for (var i=0, iLen=rules.length; i<iLen; i++) {
if (selector == rules[i].selectorText) {
sheet.deleteRule(i);
}
}
}
// Add a rule to sheet given a selector and CSS text
function addRule(selector, text) {
// First delete the rule if it exists
deleteRule(selector);
// Then add it
sheet.insertRule(selector + text);
}
// Return object with methods
return {
'addRule': addRule,
'deleteRule': deleteRule
};
}());
// Convenience functions to hide and show rows
function hideRows(){
myStyles.addRule('tr[name="1"]','{display: none}');
}
function showRows(){
myStyles.deleteRule('tr[name="1"]');
}
如果带有选择器的规则已经存在，addRule 函数的替代行为是:
- 什么都不做，或者
- 将新的 CSS 文本添加到现有规则中
一些播放 HTML:
<table>
<tr name="1"><td>name is 1
<tr name="1"><td>name is 1
<tr name="1"><td>name is 1
<tr name="1"><td>name is 1
<tr name="2"><td>name is 2
<tr name="2"><td>name is 2
<tr name="2"><td>name is 2
<tr name="2"><td>name is 2
</table>
<button onclick="hideRows()">Hide rows named 1</button>
<button onclick="showRows()">Show rows named 1</button>
单击第一个按钮通过添加 CSS 规则隐藏名称为“1”的所有行，单击另一个按钮通过删除规则显示它们。
当然你可以做得更复杂，上面只是展示了方法。
关于javascript - 如何在 html 表中隐藏多行(数千行)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28453677/