JavaScript-Programmierung mit jinja

Question

Werten Ich habe einen Block von HTML-Code

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

{{}} stock.C4 eine Leistung von keinem in der HTML-Zelle hat. ich will (vielleicht Javascript?) Code, der im Grunde sagt

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

Code, der die Zelle eine Farbe auf dem html/jinja Wert

Answer 1

Verwenden document.querySelectorAll erhalten alle td einer bestimmten Tabelle basiert macht, die verwenden array#forEach zu überprüfen, ob es leer mit innerHTML ist, wenn so classList.add verwenden, um eine CSS-Klasse, um es

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>

hinzufügen

Answer 2

Wenn der Inhalt der Zelle il wirklich leer ist, können Sie die Regel

td:empty { 
    background-color: red; 
} 

zu Ihrem CSS (Anpassung der Wähler und die Stile auf Ihre Bedürfnisse) hinzufügen.

die :empty pseudoclass wird seit ie9 unterstützt (nicht zu sagen, dass andere Browser es vom Tag Null unterstützen). Auch mobile Unterstützung scheint recht gut.

Answer 3

Hier eine mögliche Lösung ist Mustache mit (das erfordert Ihre Datenstruktur ändern)  :

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>