javascript programming with jinja values

Question

I have a block of HTML code

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

{{stock.C4}} has an output of None in the html cell. I want (maybe javascript?) code that basically says

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

code that makes the cell a color based on the html/jinja value

[Loop through all the `td`s](https://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript) and check the `innerHTML` of each item. If that matches to 'None', then change its background. — 31piy, Dec 07 '17 at 06:23
Seems to be duplication of https://stackoverflow.com/questions/8666500/changing-background-cell-of-table-depending-on-value — bimlas, Dec 07 '17 at 06:34
You might try something like this (assuming that you are using [Mustache](https://github.com/janl/mustache.js)) : `{{#stocks}}{{#isNone}}{{/isNone}}{{^isNone}}{{/isNone}}{{C4}}{{/stocks}}`. Of course, the`isNone` predicate is not provided, you have to implement it by yourself following the instructions given at Github. — leaf, Dec 07 '17 at 06:54
@bimlas question is similar, maybe a corner case, but the solution may be different — Eineki, Dec 07 '17 at 07:02

Eineki · Answer 1 · 2017-12-07T07:46:16.957

2

If the content of the cell il really empty, you can add the rule

td:empty {
    background-color: red;
}

to your css (adapt the selector and the styles to your needs).

the :empty pseudoclass is supported since ie9 (no need to say that other browser support it from day zero). Also mobile support seems quite good.

edited Dec 07 '17 at 07:46

answered Dec 07 '17 at 06:43

Eineki

14,008
6
47
54

score 0 · Answer 2 · answered Dec 07 '17 at 06:34

0

Use document.querySelectorAll to get all the td of a specific table, the use array#forEach to check if it is empty using innerHTML, if so use classList.add to add a css class to it

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


})

.empty {
  background: green;
}

<table border="1" id="demoTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td></td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td></td>
  </tr>
</table>

answered Dec 07 '17 at 06:34

brk

43,022
4
37
61

Error: { "message": "Object doesn't support property or method 'forEach'", "filename": "https://stacksnippets.net/js", "lineno": 29, "colno": 1 } – jessewerion Dec 07 '17 at 06:55
It seems you are trying to apply forEach on a non array – brk Dec 07 '17 at 06:57

score 0 · Answer 3 · answered Dec 07 '17 at 19:26

Here is a possible solution using Mustache (that requires to change your data structure) :

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>

javascript programming with jinja values

3 Answers3