Javascript / jQuery使用具有特定颜色的单元格绘制表格来计算方程式

Question

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

这是图片：

一些解释

在我的数据库中，我可以知道每位患者的年龄，根据它，我会显示表格，当然还有性别（男性或女性）。然后我们将指定他的总胆固醇，当我们添加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>