hw7-1

by sunnyhong

HTML

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

JavaScript

$("button").click(function () {

$("#detail").append("<table>"+
"<tr> <th>id</th><th>author</th><th>title</th><th>genre</th><th>price</th><th>public_date</th> </tr>"+
"<tr> <td id='i'></td><td id='a'></td><td id='t'></td><td id='g'></td><td id='p'></td><td id='pd'></td> </tr>"+
"</table>");

$(catalog).find("book").each(function(i){
var id=$("<p>").text($(this).attr("id"))
var author=$("<p>").text($(this).children("author").text())
var title=$("<p>").text($(this).children("title").text())
var genre=$("<p>").text($(this).children("genre").text())
var price=$("<p>").text($(this).children("price").text())
var publish_date=$("<p>").text($(this).children("publish_date").text())
$("#i").append(id);
$("#a").append(author);
$("#t").append(title);
$("#g").append(genre);
$("#p").append(price);
$("#pd").append(publish_date);
});

});

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>
`;