How can i make a button, so when i press it, it should show the table. The table needs to be invisible until the button is pressed, and then when buttton pressed the table should be shown. please help
<!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>
You would achieve the effect by manipulating the CSS.
First set the table's style Display: none, then add a button to change that to 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>
This should do it.