Loading JSON var into an existing HTML table through Button-Click

Question

I have an already written (in html) table and i want to "rewrite" it when i press the "refresh data" button. So far, i lose all of my css style for a reason (like i' m creating a new table from scratch). My code:

HTML - Table :

<div id="priceInfo">
            <button id="priceInfoB">refresh data</button>
        </div>
        <table id="myTable" border='1'>
            <tr class="head">
                <th></th>
                <th data-city="ny">New York</th>
                <th data-city="il">Chicago</th>
                <th data-city="ca">San Francisco</th>
            </tr>
            <tr>
                <th class='rowTH' id="one"><a href="#" class="tooltip" rel="0">A Poetic Perspective</a></th>
                <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
                <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
                <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
            </tr>
            <tr class="even">
                <th class='rowTH' id="two"><a href="#" class="tooltip" rel="1">Walt Whitman at War</a></th>
                <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
                <td>Sat, 5 May 2012<br />11am - 1pm</td>
                <td>Sat, 19 May 2012<br />11am - 1pm</td>
            </tr>
            <tr>
                <th class='rowTH' id="three"><a href="#" class="tooltip" rel="2">Found Poems &amp; Outsider Poetry</a></th>
                <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
                <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
                <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
            </tr>
            <tr class="even">
                <th class='rowTH' id="four"><a href="#" class="tooltip" rel="3">Natural Death: An Exploration</a></th>
                <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
                <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
                <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
            </tr>
        </table>

JSON Var :

var eventsJson='{"events":{"event":[{"id":"1","name":"A Poetic Perspective","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Vivamus elementum, diam eget ullamcorper fermentum, ligula libero euismod massa, quis condimentum tellus lacus sit."},{"id":"2","name":"Walt Whitman at War","isFree":"false","locations":[{"location":"New York","eventDate":"2015-07-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-08-01","eventTime":"15:00"}],"descr":"Donec convallis eu metus eget dictum. Etiam non lobortis dui."},{"id":"3","name":"Found Poems & Outsider Poetry","isFree":"false","locations":[{"location":"New York","eventDate":"2015-06-02","eventTime":"11:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Ut fermentum, elit vel iaculis viverra, dui libero ultrices nibh, ut ornare."},{"id":"4","name":"Natural Death: An Exploration","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet urna ut tortor consequat."}]}}';

Any help will be appreaciated. Any manual and/or command i havent thought about will be helpful!

You need `AJAX`, Nice tutorial [here](http://www.w3schools.com/ajax/). — Shrinivas Shukla, Jul 16 '15 at 15:56
i can do this only with ajax? no other way?..Also, ajax needs it's own libraries? Thank you — , Jul 16 '15 at 15:57
Ajax can be done with native JS functions (no library). http://youmightnotneedjquery.com/ But since you used the `jQuery` tag on your question, just use [`$.ajax()`](http://api.jquery.com/jquery.ajax/), which is provided by that library. — blex, Jul 16 '15 at 15:58
`AJAX` can be used with `XmlHttpRequest`. No external library required. — Shrinivas Shukla, Jul 16 '15 at 15:59

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Loop through the json data
For each record, clone the table rows you need. Demo here

Using jQuery to build table rows from Ajax response(Json)

Swap the cell data with data from your JSON
Append the rows to the table

edited May 23 '17 at 12:14

Community

1
1

answered Jul 16 '15 at 16:01

DrLazer

2,805
3
41
52

will ajax keep my css?..cause creating the table is easy, but what i must do to keep my formating style?..using the #myTable doesn't seem to help – Jul 16 '15 at 16:09
yes if you clone the row it will keep the same attributes, including the class – DrLazer Jul 17 '15 at 12:35
#myTable is your table id, not the css class – DrLazer Jul 17 '15 at 12:35

Loading JSON var into an existing HTML table through Button-Click

1 Answers1