rpc*_*pc1 3 html javascript html-table show hide
我有很多行的 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、块标签、隐藏行，然后停在其中一种：循环行并隐藏/显示它：
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 的 PS
最快的方法可能是使用 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函数的替代行为是：
有些播放 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”的所有行，单击另一个按钮可通过删除规则来显示它们。
当然你可以把它做得更复杂，上面只是展示了方法。