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

Question

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

大约:150列,最多可容纳10,000行.

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

因此,在每个单元格中都有一个数字,并根据数字所适合的百分比填充背景颜色.

例如:有条带

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

我在小桌子上试过的是给每个<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 分页。