javascript - 通过单击按钮将 JSON var 加载到现有的 HTML 表中

Question

我有一个已经写好的(用 html 格式)表格，我想在按下“刷新数据”按钮时“重写”它。到目前为止，我失去了我所有的 css 样式是有原因的(比如我从头开始创建一个新表)。我的代码:

HTML - 表格:

<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 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."}]}}';

任何帮助将不胜感激。我没有想到的任何手册和/或命令都会有所帮助!

Answer 1

• 遍历 json 数据
• 对于每条记录，克隆您需要的表格行。此处演示

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

• 将单元格数据与 JSON 中的数据交换
• 将行追加到表中