Skip to content
Advertisement

HTML / PHP :how do I highlight the number searched in multiplication table that i generated?

HTML

    <form method="GET">
            <b><th>Enter rows: </th>
            <input type="number" name="row"/>&nbsp&nbsp&nbsp
            <th>Enter columns: </th>
            <input type="number" name="column"/></b>
            <br>
            <br>
        <input type="submit" name="generate" value="GENERATE">
        <br><br>
    </form>

this is the PHP code. I’m using the “for loop” structure for the multiplication table but I don’t know how to highlight the searched number inside the multiplication table. I’m still working on the search.

    <?php
        if(isset($_GET['generate']))
        {
            echo "<b>";
                echo "<table name='tab' border='1'>";
                        $rows = $_GET['row'];
                        $columns = $_GET['column'];
                        for ($row =1; $row <= $rows; $row++)
                        {
                            echo "<tr>";
                            for ($column = 1; $column <= $columns; $column++)
                            {
                                echo "<td>" . $column * $row ."</td>";
                            }
                            echo "</tr>";
                        }
                echo "</table>";
            echo "</b><br><br>";
            echo "<form method='GET'>";
            echo "<div class='mid'><b><th>Search: </th>";
            echo "<input type='number' name='searchbar'/></div>";
            echo "<br><br>";
            echo "<input type='submit' name='search' value='SEARCH'>";
            echo "<br><br>";
            echo "</form>";
            }
            ?>

Advertisement

Answer

You can try with this code:

<?php
    $searchbar = isset($_POST["searchbar"]) ? intval($_POST["searchbar"]) : "0";
    $rows = isset($_GET["row"]) ? intval($_GET["row"]) : "0";
    $columns = isset($_GET["column"]) ? intval($_GET["column"]) : "0";
    if(isset($_GET['generate']))
    {
        echo "<table name='tab' border='1'>";
        for ($row =1; $row <= $rows; $row++)
        {
            echo "<tr>";
            for ($column = 1; $column <= $columns; $column++)
            {
                $highlight = ($searchbar == $column * $row);
                echo "<td ".($highlight ? 'style="background: red;"' : "")."><b>" . $column * $row ."</b></td>";
            }
            echo "</tr>";
        }
        echo "</table>";
        echo "<br><br>";
        echo "<form method='POST'>";
        echo "<div class='mid'><b>Search: </b>";
        echo "<input type='number' name='searchbar' value='$searchbar'/></div>";
        echo "<br><br>";
        echo "<input type='submit' name='search' value='SEARCH'>";
        echo "<br><br>";
        echo "</form>";
    }
    die();
?>

First of all, if you use GET as attribute of the tag form, during the submission, you will lost the generate, row and column parameters. If you want to use method GET you have to populate 3 input type hidden (Example: <input type="hidden" name="column" value="8">) inside the form for every parameter you want to retain.

So you can try also with this code:

<?php
    $searchbar = isset($_GET["searchbar"]) ? intval($_GET["searchbar"]) : "0";
    $rows = isset($_GET["row"]) ? intval($_GET["row"]) : "0";
    $columns = isset($_GET["column"]) ? intval($_GET["column"]) : "0";
    if(isset($_GET['generate']))
    {
        echo "<table name='tab' border='1'>";
                for ($row = 1; $row <= $rows; $row++)
                {
                    echo "<tr>";
                    for ($column = 1; $column <= $columns; $column++)
                    {
                        $highlight = ($searchbar == $column * $row);
                        echo "<td ".($highlight ? 'style="background: red;"' : "")."><b>" . $column * $row ."</b></td>";
                    }
                    echo "</tr>";
                }
        echo "</table>";
        echo "<br><br>";
        echo "<form method='GET'>";
        echo "<input type='hidden' name='generate' value='1'/>";
        echo "<input type='hidden' name='row' value='$rows'/>";
        echo "<input type='hidden' name='column' value='$columns'/>";
        echo "<div class='mid'><b>Search: </b>";
        echo "<input type='number' name='searchbar' value='$searchbar'/></div>";
        echo "<br><br>";
        echo "<input type='submit' name='search' value='SEARCH'>";
        echo "<br><br>";
        echo "</form>";
    }
?>

Using method POST the url remains the same and you can transfer the searchbar parameter after the submit. Inside the loop you can check the searchbar value with the generated numbers and highlight the correct number.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement