如何用js根据表格内的值改变表格背景色? 且数据是django传入的

我现在是有个表格里面的数据是用django传入的,现有4行4列表格(整个html只有这一个表格)比如说是2424342152315423不同数字颜色不同,比如说1和2黄色... 我现在是有个表格 里面的数据是用django传入的,
现有4行4列表格(整个html只有这一个表格)
比如说是 2 4 2 4
3 4 2 1
5 2 3 1
5 4 2 3
不同数字 颜色不同,比如说1和2 黄色 3和4 绿色,5 红色 该怎么用js写

另外我已有js代码,是根据键盘输入来响应的 上述的代码应该在它之前还是之后还是都可以
展开
 我来答
匿名用户
推荐于2016-07-30
展开全部
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>main.html</title>
<style type="text/css">
table {
margin: auto;
width: 300px; 
border-collapse: collapse;
border: 1px solid black;
}

td {
border: 1px solid black;
text-align: center;
font: 20px/1.5 Consolas, 微软雅黑;
}
</style>
<script type="text/javascript">
var json = [
            2, 4, 2, 4, 3, 4, 2, 1, 5, 2, 3, 1, 5, 4, 2, 3
    ];
    var row = 4, col = 4;
    var COLORS =
    {
        "1" : "yellow",
        "2" : "yellow",
        "3" : "green",
        "4" : "green",
        "5" : "red"
    };
    onload = function ()
    {
    var table = document.createElement ('table');
    var tbody = document.createElement ('tbody');
    table.appendChild (tbody);
    for ( var i = 0; i < row; i++)
    {
    var tr = tbody.insertRow (tbody.rows.length);
    for ( var j = 0; j < col; j++)
    {
    var td = tr.insertCell (tr.cells.length);
    var val = json[i * col + j];
    var txt = document.createTextNode (val);
    !!COLORS[val] ? td.style.color = COLORS[val] : 0;
    td.appendChild (txt);
    }
    }
    document.body.appendChild (table);
    }
</script>
</head>
<body>
</body>
</html>
追问
效果很好,但如果表格不是用js创建的,而是本来就有的,用js捕捉表格数据再判断再选相应颜色输出该怎么写,我会再加分
追答
你就循环table里面的td里面的文本,判断修改就可以了,道理都是类似的,举一反三吧
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式