使用Javascript显示/隐藏超大表行的简单/快速方法？

这就是我要做的。我有一个非常大的项目清单。比如说它大约有13万件。每件物品都是一根线，类似于“杏仁古董碧绿耐火砖”

现在，我只是将每个项目作为一个单元格放在表的一行中。最好只显示以a开头或以b开头的项目，以此类推。我在写js的时候遇到了一些问题，但是最大的问题是速度——在一个包含这么多项目的表上做任何事情都非常慢。有没有更好的方法来解决这个问题

如果答案是否定的，那么就可以了——这是一个数据库类的额外学分分配，这个组件是基于报告的。这个特定的数据集来自一个包含600万个项目的DB表，因此没有什么可以真正减少大小

编辑：这里有一些关于这个问题的更多信息。我通过一个C#程序创建这个HTML页面。该程序使用LINQ2SQL查询这个庞大的数据库，获取结果，并将其输出到HTML文件中。这不是一个网站，没有数据来自服务器；这是一个静态HTML页面，可在浏览器中查看。如果我想的话，我可以将其实现为csv，但我认为作为一个教堂式的HTML文件看起来更好

我正在加载的数据类型是：“对于每个地区，查找1993年上半年未销售的所有产品”。因此，大约有20万种产品，每个地区通常只销售约7万种。这意味着有13万种未售出的产品，我们必须列出每个地区的所有产品。每个区域都有一个单独的HTML文件，但我想不出任何方法来进一步减少数据量

---

进一步编辑：谢谢大家的建议。我想，这个问题的简短答案是“不，这将是缓慢的”。正如一位评论者所说，10万多个项目的列表不属于HTML文档。我甚至做了这么多，超出了我的作业范围，所以我就让它休息一下

如果您可以将描述性类呈现到

和/或

服务器端，那么您只需更改父表的类，浏览器将负责按照适当的CSS重新呈现表

table.just_a td,
table.just_bipeds td {
    display:none;
}

table.just_a td.a,
table.just_bidpeds td.biped {
    display:inherit;
}

<table class="" id="theTable">
  <tr>
    <td class="a quadraped">Anteater</td>
  </tr>
  <tr>
    <td class="z quadraped">Zebra</td>
  </tr>
  <tr>
    <td class="h biped">Human</td>
  </tr>
</table>
<input type="button" onclick="document.getElementById('thTable').className='just_a'" value="Just A" />

table.just_td，
table.just_两足动物td{
显示：无；
}
表a.just_a td.a，
table.just_bidpeds td.biped{
显示：继承；
}
食蚁兽
斑马
人类

在网站中插入大量数据时，提高性能的关键是减少页面刷新次数。这可以通过尝试一次添加所有数据来实现，方法是将所有html压缩成一个字符串并只插入一次

例如：

var html = "<table>";

for (var i = 0; i < listOfData.length; i++)
{
  html += "<tr><td>" + listOfData[i] + "</td></tr>";
}
html += "</table>";

// Insert it
$("body").html(html);

var html=”“；
for（var i=0；i

---

希望有帮助

我讨厌毫无意义的家庭作业！正确的答案是，这样做是错误的。你永远不应该试图在一个HTML页面上显示100K+（甚至10K..）个项目。但是，如果问题是“如何最好地以错误的方式做某事”，那么我将按照以下步骤将其分解为可管理的显示大小，同时仍将所有内容保留在单个客户端页面中

1） 将数据呈现为按字母顺序排序的Javascript数组，而不是HTML

2） 用HTML/javascript创建一个简单的菜单，让用户只选择第一个字母

3） 再次使用JS使用之前构建的数组中的数据呈现表。为了避免从该数组中进行耗时的选择，可以为字母表的每个字母保留第一个元素的单独索引

我可以想象，一个包含100K个项目的JS数组仍然会非常慢，但可能比一次渲染要慢得多

---

如果您需要的话，您可以进一步使用一些东西来创建分页，只需使用数组中的所有数据即可。

坚持csv，130k列表项不属于html页面。

无论速度有多慢，抱歉。除非您在刀片服务器或其他服务器上运行web浏览器；-）

但是，有一个技巧可以合法地加快速度：与其将行的display属性设置为“none”，不如将它们的类设置为“nodisplay”，并定义css规则：

.nodisplay { display:none }

现在你可能会想，有什么区别，但事实上（quirksmode.org的PPK曾经用基准测试证明了这一点）浏览器在切换带有相关样式更改的类时比直接更改元素样式时更快

---

不能说这会让你快速地改变你巨大的表格，但它应该会让你更快。

你是说把每个字母都放在自己的标签下吗？不，我没有试过。数据必须呈现在一个表中吗~你能把数据放在多个样式相同的表中吗？你需要实现延迟加载和自定义数据视图控制……我真的想不出任何方法来逻辑地分割数据。我将在这里发布更多关于编辑内容的信息。尝试使用130k记录进行编辑。这不会再快了。@Raynos为什么不呢？为了澄清，我的答案首先基于以这种方式呈现表的能力（服务器端），我想这是可能的，但搜索的可能性仅限于您在server@Raynos同意。但我看不出有任何理由在客户端进行复杂的搜索。简单的分类搜索可以通过这种方式进行预优化~对于这项家庭作业的范围，我最终决定这不值得我花时间。这份报告的格式很小……下一节关于数据挖掘的内容将花费我更长的时间，所以我只是说“去它的”。然而，如果我实现了它，我就会走这条路@埃文莫兰