Question

我有一段HTML代码

<td>{{stock.C4}}</td>
<td>{{stock.C5}}</td>
<td>{{stock.C6}}</td>
<td>{{stock.C7}}</td>
<td>{{stock.C8}}</td>

{{stock.C4}}在html单元格中输出为None。我想（可能是javascript？）代码基本上说

 if {{stock.C4}} == 'None'
       element.style.backgroundColor = "red"

使单元格成为基于html / jinja值的颜色的代码

Answer 1

如果单元格il的内容确实为空，则可以添加规则

td:empty {
    background-color: red;
}

到你的css（根据你的需要调整选择器和样式）。

从ie9开始支持:empty pseudoclass（无需说其他浏览器从第0天开始支持它）。移动支持似乎也很不错。

Answer 2

使用regex: /[0-9]/ User: test_user Specific address: test_address@zimbra.com获取特定表格的所有document.querySelectorAll，使用td使用array#forEach检查其是否为空，如果是，请使用innerHTML向它添加一个css类

classList.add

var getAllTD = document.querySelectorAll("#demoTable td");
getAllTD.forEach(function(item) {
  if (item.innerHTML === '') {
    item.classList.add('empty')
  }


})

.empty {
  background: green;
}

Answer 3

以下是使用Mustache的可能解决方案（需要更改数据结构）：

var stocks = [
  ["A1", "A2", "None"],
  ["None", "B2", "B3"],
  ["C1", "None", "C3"]
];

var view = {
  stocks: stocks,
  isNone: function () {
    return this == "None";
  }
};

var template = ""
+ "{{#stocks}}"
+   "<tr>"
+     "{{#.}}"
+       "{{#isNone}}<td class=\"none\">{{.}}</td>{{/isNone}}"
+       "{{^isNone}}<td>{{.}}</td>{{/isNone}}"
+     "{{/.}}"
+   "</tr>"
+ "{{/stocks}}"
;

var table = document.getElementById("table");
table.innerHTML = Mustache.render(template, view);

table,td{border:1px solid black;border-collapse:collapse;}
td.none{background:#ffa7b7}
td{padding:.25em}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<table id="table"></table>

使用jinja值进行javascript编程

3 个答案: