JSFiddle - React, Tailwind, and code Playground

by sunnyhong

HTML

<div id="container">
  <button class="btn" id="showData">Show</button>
  <div id="detail">
  </div>
</div>

JavaScript

const catalog =`
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
   </book>
</catalog>
`;

function readyFunc() {
	$('#showData').click(function() {
    let xmlDoc = $.parseXML(catalog);
    let table = $('<table></table>');
    table.append(`
        <tr>
          <th>id</th>
          <th>author</th> 
          <th>title</th>
          <th>genre</th>
          <th>price</th>
          <th>publish_date</th>
        </tr>`);
        
    $(xmlDoc).find('book').each(function() {
      let $thisBook = $(this);
			table.append(`
        <tr>
          <td>${$thisBook.attr('id')}</td>
          <td>${$thisBook.find('author').text()}</td>
          <td>${$thisBook.find('title').text()}</td>
          <td>${$thisBook.find('genre').text()}</td>
          <td>${$thisBook.find('price').text()}</td>
          <td>${$thisBook.find('publish_date').text()}</td>
        </tr>
      `);
    });
    
  	$('#detail').html(table);
  });
}

$(document).ready(readyFunc);