too long

Question

I have mysql hidden nested table. When the yellow arrow click, the nested table show/hide. The problem is my table row got broken.

Just like the image above, the other table row had been broken. What is the problem with this?

    <?php
        echo'<table id="tfhover" cellspacing="0" class="tablesorter">
            <thead>
            <tr>
            <th style="display:none;"></th>
            </tr>
            </thead>';
            echo'<tbody>';
        $i=1;   
    while($row = $result->fetch_assoc()){
        echo'<tr>
                <td align="center" id="none">';
                if (empty($row['qtysum'])){
                echo '<a href="javascript:void(0)"></a></td>';
                } else {
                echo '<a onclick="toggleTable(this);" data-counter="'.$rowid.'" href="#"><img src="images/arrow_right.png" border="0" width="15" height="15" title="Show List of '.$row["item_name"].'"></a></td>';
                }
                echo'<td>'.$i++.'</td>
                </tr>';

echo'<tr>';
        echo'<table id="loginTable'.$rowid.'" border="1" align="center" style="display:none">
            <thead>
            <tr>
            <th></th>
            </tr>
            </thead>';
            echo'<tbody>';
        $i=1;   
    while($row = $result1->fetch_assoc()){
        echo'<tr>
            <td>'.$i++.'</td>
            </tr>';
           }
    echo "</tbody></table></tr>";
           }
          }
        echo "</tbody></table>";
    ?>

Here's my script of show/hide table.

<script>
function toggleTable(link) {
     var elem=document.getElementById("loginTable" + link.getAttribute('data-counter'));
     var hide = elem.style.display =="none";
     if (hide) {
        elem.style.display="table";
     } else {
        elem.style.display="none";
     }
     return false;
 }
</script>

If has <tr><td> </td></tr>

Answer 1

Looks like there were no parent td opened before the child table was created, and the closing tags also was missing.

The parts where changes was made is commented using <!-- -->

    <?php
        echo'<table id="tfhover" cellspacing="0" class="tablesorter">
            <thead>
            <tr>
            <th style="display:none;"></th>
            </tr>
            </thead>';
            echo'<tbody>';
        $i=1;   
    while($row = $result->fetch_assoc()){
        echo'<tr>
                <td align="center" id="none">';
                if (empty($row['qtysum'])){
                echo '<a href="javascript:void(0)"></a></td>';
                } else {
                echo '<a onclick="toggleTable(this);" data-counter="'.$rowid.'" href="#"><img src="images/arrow_right.png" border="0" width="15" height="15" title="Show List of '.$row["item_name"].'"></a></td>';
                }
                echo'<td>'.$i++.'</td>
                </tr>';

echo'<tr><td>'; <!-- there was no td opened here -->
        echo'<table id="loginTable'.$rowid.'" border="1" align="center" style="display:none">
            <thead>
            <tr>
            <th></th>
            </tr>
            </thead>';
            echo'<tbody>';
        $i=1;   
    while($row = $result1->fetch_assoc()){
        echo'<tr>
            <td>'.$i++.'</td>
            </tr>';
           }
        echo "</tbody></table>";
    <!-- opened tr,td are closed here -->
        echo "</td></tr>"
           }
          }
        echo "</tbody></table>";
    ?>