Parsing JSON table: hiding a row, changing color of word.Parsing JSON table: hiding a row, changing color of word.

programming web dev
1

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>
2

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>
2 Likes