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!

CodePudding user response：

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>

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

As mentioned in my comment you can simply select the excess table rows with CSS selector logic.

function excerpt(){
  var excessRows = tableBody.querySelectorAll("tr:nth-child(n 4)");
  excessRows.forEach(row => row.style.display = row.style.display ? "": "none");
}

<table>
<tbody id="tableBody">

    <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 Less/More</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>