Search code examples
javascripthtmltoggle

Toggle show/hide div in html table

I need to be able to click on the image in one of the cells to display a table of details generated by a query. Below is a small example of the code. Why is the second row displays if div's display is set to none?

<html>
    <head>
       <title>Show/Hide Test</title>
       <script>
            function showDeta() {
            var x = document.getElementById("details");
            if (x.style.display === "none" || x.style.display === "") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            }   
        </script>      
    </head>
<body>
    <table border="1">
        <tr>
            <td>Blah <image id="x" src="details.png" onClick="showDeta(this)" /></td>
        </tr>
        <div id="details" style="display:none;">        
            <tr>
                <td>Details of Blah</td>
            </tr>
        </div>           
    </table>    
</body>
</html>

enter image description here

Solution

  • Because a <div> cannot be a direct child of a <table>, the most straightforward way to achieve your goal would be to put the id and style from the on the 2nd : <tr id="details" style="display:none;" Or put the div inside the 2nd tr and td.

    To answer the question you added in the comments: Turn your id="detail" into a class. For simplicity, I'm adding a <tbody> for each set of related <tr> tags. Pass the event into the function and use the event to find the related details.

                function showDeta(e) {
            var x = e.currentTarget.closest("tbody").querySelector(".details");
            if (x.style.display === "none" || x.style.display === "") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            }   
    
    <table border="1">
<tbody>
        <tr>
            <td>Blah <image id="x" src="details.png" onClick="showDeta(event)" /></td>
        </tr>  
            <tr class="details" style="display:none;">
                <td>1 Details of Blah</td>
            </tr>
</tbody>
<tbody>
        <tr>
            <td>Blah <image id="x" src="details.png" onClick="showDeta(event)" /></td>
        </tr>  
            <tr class="details" style="display:none;">
                <td>2 Details of Blah</td>
            </tr>
</tbody>
    </table>