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>