在制作应用程序的 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 区域中的数据。 然后表呈现客户端。因此作为渲染,决定设置什么类值。
还有哪些其他可能的方法可以根据内容为每个单元格设置样式?
最佳答案
我认为最好的方法是不要一次加载那么多行。不久前,我制作了一个程序,比较了数千个数据点,但加载速度非常慢——问题是我显示的是所有单独的结果。最后很好,但我们只需要查看总数。我最终只显示了总计,并进行了 ajax 调用以根据需要重新获取个别结果(如果有人专门在寻找它们)。
简而言之,如果您担心为所有单元格设置样式会花费很长时间,那么您可能不应该一次加载那么多单元格。可能想调查AJAX pagination .
关于javascript - HTML 表格 - 为数千个单元格设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27585831/