I´ve got a table with 50 rows, which is way too much for a website if you look the first time on a page. I want to create a button that can unfold and fold up the whole table.
My big problem is that I have no knowledge about javascript :(.
I don't want to paste here 50 rows of code... Here's a shorter example:
<table>
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<! --it should unfold here-->
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
</tbody>
</table>
<button onclick="toggleText()" id="showMore">Show More
</button>
Like you see in my example I want to unfold my whole table after 3 rows. What do I have to do to achieve this?
Big thanks and have a nice weekend!
You can use for this case the Javascript toggle function. Something like that:
const trs = document.getElementsByTagName("tr");
const startWith = 3;
function showMore() {
for (let i = startWith; i < trs.length; i++) {
trs[i].classList.toggle('hidden')
}
}.hidden {
display:none;
}<table id="t">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<tr>
<td>row 1</td>
<td>row 2</td>
</tr>
<! --it should unfold here-->
<tr class="hidden">
<td>row 1</td>
<td>row 2</td>
</tr>
<tr class="hidden">
<td>row 1</td>
<td>row 2</td>
</tr>
</tbody>
</table>
<button onclick="showMore()" id="showMore">Show More
</button>As mentioned in my comment you can simply select the excess table rows with CSS selector logic.
function excerpt(){
var excessRows = myTable.querySelectorAll("tr:nth-child(n+4)");
excessRows.forEach(row => row.style.display = window.getComputedStyle(row).display === "none" ? "block" : "none");
}td { border : 1px solid red}
tr { display : block}
tr:nth-child(n+4) {display : none}<table id = "myTable">
<tbody>
<tr>
<td>row 1 this</td>
<td>row 1 that</td>
</tr>
<tr>
<td>row 2 this</td>
<td>row 2 that</td>
</tr>
<tr>
<td>row 3 this</td>
<td>row 3 that</td>
</tr>
<! --it should unfold here-->
<tr>
<td>row 4 this</td>
<td>row 4 that</td>
</tr>
<tr>
<td>row 5 this</td>
<td>row 5 that</td>
</tr>
</tbody>
</table>
<button onclick="excerpt()" id="showMore">Show More/Less</button>try below javascript code.
<script>
function toggleText() {
const tableRows = document.getElementsByTagName("tr");
// initialise i with row number from which you need to hide/show
for (let i = 3; i < x.length; i++) {
if (tableRows[i].style.display === "none") {
tableRows[i].style.display = "table-row";
} else {
tableRows[i].style.display = "none";
}
}
}
</script>