Javascript/jQuery 绘制表格，其中包含具有特定颜色的单元格来计算方程

Question

是否有一个库或至少有一些关于纯 JavaScript/jQuery 脚本的信息可以帮助我创建下图中的表单，让护士在相应的单元格内放置一个 X 来计算称为 CVD 的医学方程？

这是图片:

一些解释

在我的数据库中，我可以知道每个患者的年龄，根据它，我将显示表格，当然还有性别(男性或女性)。然后我们将指定他的总胆固醇，当我们添加 X 时，我们会看到 X 出现的颜色，我们就可以知道 CVD 风险因素是什么。

当然，Y 轴用于称为 SOP 的东西。

我认为最难的部分是如何显示背景颜色。

Answer 1

这并不能解决您的根本问题，但为了显示表格的背景颜色，您可以使用 CSS 渐变，相应地调整停止点。

.bg-grad {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1dae59+0,1dae59+33,f37437+34,f37437+69,e43c40+70,e43c40+70 */
  background: #1dae59; /* Old browsers */
  background: -moz-linear-gradient(45deg, #1dae59 0%, #1dae59 33%, #f37437 34%, #f37437 69%, #e43c40 70%, #e43c40 70%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #1dae59 0%,#1dae59 33%,#f37437 34%,#f37437 69%,#e43c40 70%,#e43c40 70%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #1dae59 0%,#1dae59 33%,#f37437 34%,#f37437 69%,#e43c40 70%,#e43c40 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dae59', endColorstr='#e43c40',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
table.graph {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #fff;
}
table.graph td {
  border: 1px solid #ccc;
  height: 20px;
  width: 20px;
}

<table class='graph bg-grad'>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>