Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2015
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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!


    Code:
    <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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,821
    Thanks
    36
    Thanked 1,046 Times in 1,042 Posts
    Wouldn't be easier to just modify the Json file? Could you post a few sections of the Json and we could show you how yo do that.

    If you make a table and want to modify that it would also be easy. see https://www.w3schools.com/jsref/coll_table_rows.asp for ways around a table - rows and cells.

    For those that want to help with the info given Here is the five mile long line in the frist JS section:
    Code:
    <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>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New Coder
    Join Date
    Jul 2015
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi @sunfighter

    here is the JSON from the google sheet: https://spreadsheets.google.com/feed...allback=doData

  4. #4
    New Coder
    Join Date
    Jul 2015
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    working now thanks to @m_hutley over at sitepoint forums


    Code:
    <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>

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,189
    Thanks
    4
    Thanked 463 Times in 451 Posts
    Saw this over on Digital Point, linking my answer there -- though I got a bit more... colourful in my reply than I do around these parts because... well.. jQuery duping another beginner into THINKING it's worth using.

    https://forums.digitalpoint.com/thre...#post-19567839

    But bottom line how I'd go about it? Demo and code here:

    Index of /for_others/7643sfsag6/googleSheet/ - CutCodeDown

    Don't waste time with the train wreck of developer ineptitude that's jQuery, instead walk the JSON and create elements on the DOM directly, parsing for values and rows to remove as you go.

    It also populates SCOPE properly as well as providing proper THEAD and TBODY... something sorely missing from that mess of jQ.
    Last edited by deathshadow; Jul 4th, 2018 at 05:41 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,189
    Thanks
    4
    Thanked 463 Times in 451 Posts
    Oh, and side note, am I the only one who think's it's mind-numbingly dumbass that their JSON contains so much pointless redundant data, yet despite using JSON can't even be bothered to break columns and rows into columns and rows? Hurr durz...

    You'd almost think they were blindly transforming it from garbage XML instead of writing a proper construct for it. I bet they've even deluded themselves into thinking that it makes the file smaller since they can omit empty cells... by using ten times the code needed PER cell.
    Last edited by deathshadow; Jul 4th, 2018 at 05:51 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •