Question 42024 in PHP Question posted in
Official manual can be found here.

Letting another Table appear inside of an already existing Table via Button Click – PHP

I got an HTML Table with a Button on the left side.

enter image description here

What I would like to achieve is that by using the Button the Table splits below that row and another table with different columns and rows appears with the full width of the original table.. basically the new table pushes the rest of the original table down the page.

What would be a solid approach to this without using any big libraries/frameworks?

<table>
    <tr>
        <th></th>
        <th>Lieferant</th>
        <th>urspüngliches Lieferdatum</th>
        <th>Liefer-ID</th>
    </tr>
    <tr class="new_tr verspaetet">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Müller GmbH</td>
        <td>20.10.2022</td>
        <td>12384123</td>
    </tr>
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Wasser GmbH</td>
        <td>heute</td>
        <td>12385533</td>
    </tr>
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Grill GmbH</td>
        <td>heute</td>
        <td>94728544</td>
    </tr>
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Bier GmbH</td>
        <td>heute</td>
        <td>82375440</td>
    </tr>
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Pflaumen GmbH</td>
        <td>heute</td>
        <td>52469874</td>
    </tr>
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" /></td>
        <td>Bananen GmbH</td>
        <td>heute</td>
        <td>16543897</td>
    </tr>
</tr>

“`

Tags:

2

Answers


  1. 0

    Tables are not worth the hassle, learning display: grid will save you pain and time

    Login or Signup to reply.
  2. 0

    First, generate the inner table in a separate row of the table you have, and initially hide it. Something like:

    <tr style="display: none">
    <td></td>
    <td colspan="100"><table>
        <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
        <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
        <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
        <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
    </table></td>
</tr>

    The empty td serves to get a bit of indentation of the inner table. The colspan attribute ensures that the table occupies the remaining column space of the outer table.

    Once you have those inner tables embedded in your HTML, you can add some JavaScript to respond to a click on the arrow cell. Give that arrow cell a specific class so a click on it can be easily recognised.

    Here is how that looks:

    const table = document.querySelector("table");
table.addEventListener("click", function (e) {
    const td = e.target;
    if (td.classList.contains("expander")) {
        const style = td.parentNode.nextElementSibling.style;
        const wasOpen = !style.display;
        console.log(wasOpen);
        style.display = wasOpen ? "none" : "";
        td.textContent = wasOpen ? "▼" : "▲";
    }
});
    table { border-collapse: collapse }
th { background: silver;  }
td, th { border: 1px solid; }
.new_tr > td:first-child { cursor: pointer }
td > table { width: 100% }
    <table>
    <tr>
        <th></th>
        <th>Lieferant</th>
        <th>urspüngliches Lieferdatum</th>
        <th>Liefer-ID</th>
    </tr>
    <tr class="new_tr verspaetet">
        <td class="expander">▼</td>
        <td>Müller GmbH</td>
        <td>20.10.2022</td>
        <td>12384123</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
    <tr class="new_tr">
        <td class="expander">▼</td>
        <td>Wasser GmbH</td>
        <td>heute</td>
        <td>12385533</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
    <tr class="new_tr">
        <td class="expander">▼</td>
        <td>Grill GmbH</td>
        <td>heute</td>
        <td>94728544</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
    <tr class="new_tr">
        <td class="expander">▼</td>
        <td>Bier GmbH</td>
        <td>heute</td>
        <td>82375440</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
    <tr class="new_tr">
        <td class="expander">▼</td>
        <td>Pflaumen GmbH</td>
        <td>heute</td>
        <td>52469874</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
    <tr class="new_tr">
        <td class="expander">▼</td>
        <td>Bananen GmbH</td>
        <td>heute</td>
        <td>16543897</td>
    </tr>
    <tr style="display: none">
        <td></td>
        <td colspan="100"><table>
            <tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
            <tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
            <tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
            <tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
        </table></td>
    </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search