Published
Edited
Oct 5, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
colorCode = {
// this re-runs when the table changes
myTable;
// use the nth-child in teh document selector if you only want to affect a particular table
// this is a bit fragile, since new cells above the table will change the child number
// if you don't care about being specific to a table, then remove the nth-child.
const table = document.querySelector(".observablehq:nth-child(2)");
const allTableCells = table.querySelectorAll("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
var node = allTableCells[i];

//get the text from the first child node - which should be a text node
var currentText = node.childNodes[0] && node.childNodes[0].nodeValue;

//check for 'one' and assign this table cell's background color accordingly
switch (currentText) {
case "Yes" : node.style.backgroundColor = "skyblue"; break;
case "Checking", "Maybe" : node.style.backgroundColor = "lightyellow"; break;
case "Pending" : node.style.backgroundColor = "lightgrey"; break;
case "Want" : node.style.backgroundColor = "lightgrey"; break;
case "No" : node.style.backgroundColor = "#ff9f98"; break;
}
}
return md`<span style="color: grey">Table color coded on ${new Date(Date.now()).toUTCString()}</span>`
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more