Hi all,

I am using jquery to convert a google spreadsheet to JSON that produces a HTML table.

I would like to:
- hide one of the rows that has the phrase "E9" in it.
- change the color of the phrase "C12" to red.

I have tried many scripts, but to no avail!

Here is the code I currently have.

Thank you very much!

 

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>       
      //google spreadsheet
  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"))});
  
   //Hide Row based on Phrase
    $("#data tr:contains('E9')").hide ();
      
      //change color of phrase: C12
      $('table').each(function(){
   $(this).html(
        $(this).html()
       .replace(
              /(?<!-)(\bC12\b)(?!([^<]+)?>)(?!-)/ig, 
             '<span style="color:green;">$1</span>'
        )
    );
});
        
  </script>
</head>
<body>
  
<script src="https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=doData">
  </script>
  
  <div class="box-table" id="spreadsheet" style="overflow-x:auto!important;">
<table id="data"></table>
</div>

</body>
</html>

 

working now thanks to @m_hutley over at sitepoint forums

 

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.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))};
function loadAndColor(data) {
  doData(data);
  readData($("#data"));
//Hide Row based on Phrase
 $("#data tr:contains('E9')").hide();
 //change color of phrase: B10
 $("#data td:contains('B10')").each(function() { $(this).html($(this).html().replace(/\bB10\b/ig,'<span style="color:green;">B10</span>'))});
};
  </script>
</head>
<body>
  <div class="box-table" id="spreadsheet" style="overflow-x:auto!important;">
<div id="data"></div>
<script src="https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=loadAndColor">
  </script>
</div>
</body>
</html>

 

I'd look at using React for something like this, it's far better suited to building out something like this.  Problem is you won't want to be pulling in scripts like you are there you'll be wanting to use JavaScript modules and a bundler to make it work for the web.

But essentially you want to filter out certain bits of data from a JSON data structure using built in array and object methods, you could then write unit tests against this to verify that it works.

Even though your method above works - it's essentially a hack and you're just mutating the DOM rather than filtering the data before injecting it.