HTML – input field jumps out of html table

I have a ‘dynamic’ table where someone can change info about a person. When clicking on ‘update’ the cell should change to an input field. This works, but somehow the input field jumps out of the table and sits above it.

This is part of the function that shows the table:

 echo '<tr>';
        echo '<td><b>' . ucfirst(htmlspecialchars($data)) . '</b></td>'; 
        if($url_param_index[1] == $info) // Checks if second url-parameter is same as $info on row that is clicked on and changes cell to form input field
        {       
            echo '<form action="update.php method="POST"';                  
            echo '<td><input type="text" name="' . $data . '" value="' . $info . '"></td>';
            echo '<input type="hidden" name="lidnummer" value="' . $gegevens_lid['lidnummer'] . '">';
            echo '<td><button type="submit">Save</button></td>';
            echo '<td>----</td>';
            echo '</form>';
        }
        else
        {
            if($data == 'lidnummer' || $data == 'adres' || $data == 'woonplaats')
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td> ---- </td>';
                echo '<td> ---- </td>';
                
            } 
            else
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td><a href="lid.php?lidnummer=' . $gegevens_lid['lidnummer'] . '&' . $data . '=' . $info . '">Update</td>';
                echo '<td> ---- </td>';
            }            
        }
        echo '</tr>';

This is the page where the function gets called to show the table:

<div>
    <h3>Lid:</h3>
    <table>
        <tbody>
            <tr>
                <th>#</th>
                <th>Info</th>
                <th>Pas aan</th>
                <th>Delete</th>
            </tr>
            <?php show_single_lid($conn, $lidnummer); ?>          
        </tbody>
    </table>
</div>

Before clicking update

After clicking update

The input field should stay in the table at the same row/column, but it jumps out and the rest slides one over…

Answer

Try changing your PHP code to this.

 echo '<tr>';
        echo '<td><b>' . ucfirst(htmlspecialchars($data)) . '</b></td>'; 
        if($url_param_index[1] == $info) // Checks if second url-parameter is same as $info on row that is clicked on and changes cell to form input field
        {       
            echo '<td><form action="update.php method="POST"';                  
            echo '<td><input type="text" name="' . $data . '" value="' . $info . '"></td>';
            echo '<input type="hidden" name="lidnummer" value="' . $gegevens_lid['lidnummer'] . '">';
            echo '<td><button type="submit">Save</button></td>';
            echo '<td>----</td>';
            echo '</form></td>';
        }
        else
        {
            if($data == 'lidnummer' || $data == 'adres' || $data == 'woonplaats')
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td> ---- </td>';
                echo '<td> ---- </td>';
                
            } 
            else
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td><a href="lid.php?lidnummer=' . $gegevens_lid['lidnummer'] . '&' . $data . '=' . $info . '">Update</td>';
                echo '<td> ---- </td>';
            }            
        }
        echo '</tr>';

Advertisement

Answer