Letting another Table appear inside of an already existing Table via Button Click-CodePudding

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

What I would like to archieve 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.. bascially 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 >
                        <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 >
                        <td><input type="image" src="./img/down-arrow.png" /></td>
                        <td>Wasser GmbH</td>
                        <td>heute</td>
                        <td>12385533</td>
                    </tr>
                    <tr >
                        <td><input type="image" src="./img/down-arrow.png" /></td>
                        <td>Grill GmbH</td>
                        <td>heute</td>
                        <td>94728544</td>
                    </tr>
                    <tr >
                        <td><input type="image" src="./img/down-arrow.png" /></td>
                        <td>Bier GmbH</td>
                        <td>heute</td>
                        <td>82375440</td>
                    </tr>
                    <tr >
                        <td><input type="image" src="./img/down-arrow.png" /></td>
                        <td>Pflaumen GmbH</td>
                        <td>heute</td>
                        <td>52469874</td>
                    </tr>
                    <tr >
                        <td><input type="image" src="./img/down-arrow.png" /></td>
                        <td>Bananen GmbH</td>
                        <td>heute</td>
                        <td>16543897</td>
                    </tr>

                    </tr>
                </table>

CodePudding user response：

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 >
        <td >▼</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 >
        <td >▼</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 >
        <td >▼</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 >
        <td >▼</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 >
        <td >▼</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 >
        <td >▼</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>

CodePudding user response：

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