The problem is that you are trying to manipulate the table before it has had any data inserted into it.
If I was you, I would check the docs and see if Google Spreadsheets offers any kind of onload event, and if they do, hook into that (maybe that callback parameter on the URL?)
But just for fun, I made you a poor man’s version of that, which queries the table for content, then manipulates it once the content is loaded.
This should work as intended:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google sheets</title>
</head>
<body>
<div class="box-table" id="spreadsheet">
<table id="data"></table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var spData=null;function doData(a){spData=a.feed.entry}function drawCell(b,c,a){var d=$(a?"<th/>":"<td/>");b.append(d);d.append(c);return d}function drawRow(a,e,d){if(e==null){return null}if(e.length==0){return null}var b=$("<tr/>");if(d){b.addClass("head")}a.append(b);for(var f=0;f<e.length;f++){drawCell(b,e[f],((f==0)||d))}return b}function drawTable(a){var b=$("<table/>");a.append(b);return b}function readData(b){var f=spData;var d=drawTable(b);var e=[];var h=0;for(var c=0;c<f.length;c++){var a=f[c]["gs$cell"];var g=a["$t"];if(a.col==1){drawRow(d,e,(h==1));e=[];h++}e.push(g)}drawRow(d,e,(h==1))}$(document).ready(function(){readData($("#data"))});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=doData"></script>
<script>
function processTable(){
$("#data tr:contains('E9')").hide ();
$("table#data tr").children().each(function(){
if(this.innerText === "B10"){
$(this).html('<span style="color:green;">B10</span>');
}
});
}
function init(){
const i = setInterval(()=>{
const contentIsLoaded = $("table").children().length > 0;
if (contentIsLoaded){
// Content has loaded
// Kill timers and kick things off
clearInterval(i);
clearTimeout(s);
processTable();
}
}, 50);
// It didn't load after 5 seconds
// Something is probably broken
const s = setTimeout(() => {
clearInterval(i);
}, 5000);
}
init();
</script>
</body>
</html>
So problem #1: The sheet in question does not contain the data “C12” in any location.
Problem #2: The regex is flawed, and can be replaced entirely by /\bC12\b/.
Problem #3: Timing of the execution is off.
As stupid as it sounds, the callback is failing because the script tag that loads the sheet data comes before the data storing element is defined.
Here’s my version of your file. I have changed C12 to B10 as Pullo did to actually show a change.