按下按钮时，如何将数组作为表格显示到 HTML 页面？

Question

I have a project due and specific things are needed. I am trying to display a table of an array to a HTML page from a js file when a button is pressed it should display the table. Here's what I got so far:

 function dundrumArray(){ var dunMenu={ OilleánTub:"¢3.50", DeluxeOilleánTub:"¢3.80", OilleánTubSmall:"¢2.50", }; //printout object key:value in a table document.write("<table id=myTable><tr><th>Name</th><th>Cost</th></tr>"); for(var key in dunMenu) { document.write("<tr><td>",key,"</td><td>",dunMenu[key],"</td></tr>"); }; document.write("</table>"); } function cityArray(){ var cityMenu={ CitrusCrepe:"¢3.50", NutellaCrepe:"¢4", StrawberryChoc:"¢2.50", }; //printout object key:value in a table document.write("<table><tr><th>Name</th><th>Cost</th></tr>"); for(var key in cityMenu) { document.write("<tr><td>",key,"</td><td>",cityMenu[key],"</td></tr>"); }; document.write("</table>"); } function orderOnline(){ var orderMenu={ BuenoWaffleCone:"¢4.50", OilleánMess:"¢5.50", OilleánNoffee:"¢5.50", SnickerBockerGlory:"¢5.50", TwixFix:"¢5.50", }; //printout object key:value in a table document.getElementById("myTable"); document.write("<table><tr><th>Name</th><th>Cost</th></tr>"); for(var key in orderMenu) { document.write("<tr><td>",key,"</td><td>",orderMenu[key],"</td></tr>"); }; document.write("</table>"); }

 </header> <div class="button-group"> <button class="button button-primary" onclick="dundrumArray()">Dun Drum</button> <button class="button button-primary" onclick="cityArray()">City Center</button> <button class="button button-primary" onclick="orderOnline()">Order Online</button> </div> <div id="myTable"></div> </main>

Currently, when I push one of the buttons it jumps to a new page. I'm quite new to this sort of stuff. Any help would be appreciated

Answer 1

You need to replace the innerHTML of the target element with text, like this:

 function cityArray(){ var cityMenu={ CitrusCrepe:"¢3.50", NutellaCrepe:"¢4", StrawberryChoc:"¢2.50", }; //printout object key:value in a table let txt = "<table><tr><th>Name</th><th>Cost</th></tr>"; for(var key in cityMenu) { txt += "<tr><td>" + key + "</td><td>" + cityMenu[key] + "</td></tr>"; }; document.getElementById('myTable').innerHTML = txt; }

 <div class="button-group"> <button type="button" class="button button-primary" onclick="cityArray()">City Center</button> </div> <div id="myTable"></div>

Answer 2

thereis plenty JS methods to deal withe tables:

 const menu = { dunMenu: { OilleánTub: "¢3.50", DeluxeOilleánTub: "¢3.80", OilleánTubSmall: "¢2.50" }, cityMenu: { CitrusCrepe: "¢3.50", NutellaCrepe: "¢4", StrawberryChoc: "¢2.50" }, orderMenu: { BuenoWaffleCone: "¢4.50", OilleánMess: "¢5.50", OilleánNoffee: "¢5.50", SnickerBockerGlory: "¢5.50", TwixFix: "¢5.50" } } const div4Table = document.querySelector('div#myTable'), byMenu = document.querySelector('div.button-group'); function makeTable(tbName) { div4Table.innerHTML = "" // clear Anything let t = div4Table.appendChild( document.createElement('table')), tH = t.createTHead(), tB = t.createTBody(); nH = tH.insertRow() nH.insertCell().textContent = 'Name' nH.insertCell().textContent = 'Cost' Object.entries( menu[tbName]).forEach(([k,v])=> { let nRow = tB.insertRow() nRow.insertCell().textContent = k nRow.insertCell().textContent = v }) }

 table { border-collapse: collapse; margin: .5em; } thead { font-weight: bold; background-color: #978aec; text-align: center; } td { padding: .2em.7em; border: 1px solid black; }

 <div class="button-group"> <button class="button button-primary" onclick="makeTable('dunMenu')">Dun Drum</button> <button class="button button-primary" onclick="makeTable('cityMenu')">City Center</button> <button class="button button-primary" onclick="makeTable('orderMenu')">Order Online</button> </div> <div id="myTable"></div>