javascript - HTML 表格 - 为数千个单元格设置样式

Question

在制作应用程序的 html 版本的过程中，一个部分是一个表格，最终可能会有很多单元格。

大约:150 列，很容易达到 10,000 行。

问题是性能，为什么能够根据内容设置每个单元格的样式才合适？

所以在每个单元格中都有一个数字，背景颜色根据数字适合的百分比填充。

例如:有 strip

77-100 = red
33 - 77 = blue
0 < 33 = green
0 = black

我在一张小 table 上尝试的是给每个人上课 <td>我想给它上色。(颜色是用户可以改变的，所以设置一个类，应该能够改变类定义)

所以得到这样的东西:

<tr>
  <td class='percentile-100'>87.5%</td>
  <td class='percentile-77'>75.0%</td>
  <td class='percentile-0'>0.0%</td>

在 CSS 中，为类设置样式。只需要 4 种样式。

现在有 (150 * 10,000 = ) 1,500,000 个要设置样式的单元格，我在想会产生什么样的影响。

从带有数据的 JavaScript 生成的表格。但是是的，MB 区域中的数据。然后表呈现客户端。因此作为渲染，决定设置什么类值。

还有哪些其他可能的方法可以根据内容为每个单元格设置样式？

Answer 1

我认为最好的方法是不要一次加载那么多行。不久前，我制作了一个程序，比较了数千个数据点，但加载速度非常慢——问题是我显示的是所有单独的结果。最后很好，但我们只需要查看总数。我最终只显示了总计，并进行了 ajax 调用以根据需要重新获取个别结果(如果有人专门在寻找它们)。

简而言之，如果您担心为所有单元格设置样式会花费很长时间，那么您可能不应该一次加载那么多单元格。可能想调查AJAX pagination .