¿Cómo puedo hacer un botón, de modo que cuando lo presione, debería mostrar la tabla? La mesa debe ser invisible hasta que se presione el botón, y luego, cuando se presione el botón, se debe mostrar la mesa. por favor ayuda
<!DOCTYPE html> <html> <body> <table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center"> <thead> <tr> <th>Name</th> <th width="20%">Age</th> <th width="12%">Status</th> </tr> </thead> <tbody id="tableData"></tbody> </table> <script type="text/javascript"> var mainObj = [{ id: 0, kategori: 'Køer', antal: 50 }, { id: 1, kategori: 'Hunde', antal: 1 }, { id: 2, kategori: 'Grise', antal: 100 }, { id: 3, kategori: 'Får', antal: 20 }, ]; var k = '<tbody>' for (i = 0; i < mainObj.length; i++) { k += '<tr>'; k += '<td>' + mainObj[i].id + '</td>'; k += '<td>' + mainObj[i].kategori + '</td>'; k += '<td>' + mainObj[i].antal + '</td>'; k += '</tr>'; } k += '</tbody>'; document.getElementById('tableData').innerHTML = k; </script> </body> </html>Lograrías el efecto manipulando el CSS.
Primero configure el estilo de la tabla Display: none , luego agregue un botón para cambiar eso a Display: block
<!DOCTYPE html> <html> <head> </head> <body> <button class="revealBtn">Reveal Table</button> <table style="display: none" cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center" > <thead> <tr> <th>Name</th> <th width="20%">Age</th> <th width="12%">Status</th> </tr> </thead> <tbody id="tableData"></tbody> </table> <script type="text/javascript"> console.log("scripts loading..."); var mainObj = [ { id: 0, kategori: "Køer", antal: 50 }, { id: 1, kategori: "Hunde", antal: 1 }, { id: 2, kategori: "Grise", antal: 100 }, { id: 3, kategori: "Får", antal: 20 }, ]; var k = "<tbody>"; for (i = 0; i < mainObj.length; i++) { k += "<tr>"; k += "<td>" + mainObj[i].id + "</td>"; k += "<td>" + mainObj[i].kategori + "</td>"; k += "<td>" + mainObj[i].antal + "</td>"; k += "</tr>"; } k += "</tbody>"; document.getElementById("tableData").innerHTML = k; const myTable = document.querySelector("table"); console.log(myTable); const revealBtn = document.querySelector(".revealBtn"); const revealTable = () => { myTable.style.display = "block"; }; revealBtn.addEventListener("click", revealTable); </script> </body> </html>Esto debería hacerlo.