How to make a button to jump into specified table row

I have code that generate a table from my database. The code is

<body>
<?php include('navbar.php'); ?>
<div class="container">
    <h1 class="page-header text-center">ORDER</h1>
    <form method="POST" action="purchase.php">
        <table class="table table-striped table-bordered">
            <thead>
                <th class="text-center"><input type="checkbox" id="checkAll"></th>
                <th>Category</th>
                <th>Product Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Note</th>
            </thead>
            <tbody>
                <?php 
                    $sql="select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";
                    $query=$conn->query($sql);
                    $iterate=0;
                    while($row=$query->fetch_array()){
                        ?>
                        <tr>
                            <td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>
                            <td><?php echo $row['catname']; ?></td>
                            <td><?php echo $row['productname']; ?></td>
                            <td class="text-right">₨ <?php echo number_format($row['price'], 2); ?></td>
                            <td><input type="text" class="form-control" name="quantity_<?php echo $iterate; ?>"></td>
                            <td><input type="text" class="form-control" name="note_<?php echo $iterate; ?>"></td>
                        </tr>
                        <?php
                        $iterate++;
                    }
                ?>
            </tbody>
        </table>

        <div class="row">
            <div class="col-md-3">
                <input type="text" name="customer" class="form-control" placeholder="Customer Name" required>
            </div>
            <div class="col-md-2" style="margin-left:-20px;">
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#checkAll").click(function(){
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
    });
</script>
</body>
</html>

​x
 
<body><?php include('navbar.php'); ?><div class="container">    <h1 class="page-header text-center">ORDER</h1>    <form method="POST" action="purchase.php">        <table class="table table-striped table-bordered">            <thead>                <th class="text-center"><input type="checkbox" id="checkAll"></th>                <th>Category</th>                <th>Product Name</th>                <th>Price</th>                <th>Quantity</th>                <th>Note</th>            </thead>            <tbody>                <?php                     $sql="select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";                    $query=$conn->query($sql);                    $iterate=0;                    while($row=$query->fetch_array()){                        ?>                        <tr>                            <td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>                            <td><?php echo $row['catname']; ?></td>                            <td><?php echo $row['productname']; ?></td>                            <td class="text-right">₨ <?php echo number_format($row['price'], 2); ?></td>                            <td><input type="text" class="form-control" name="quantity_<?php echo $iterate; ?>"></td>                            <td><input type="text" class="form-control" name="note_<?php echo $iterate; ?>"></td>                        </tr>                        <?php                        $iterate++;                    }                ?>            </tbody>        </table>​        <div class="row">            <div class="col-md-3">                <input type="text" name="customer" class="form-control" placeholder="Customer Name" required>            </div>            <div class="col-md-2" style="margin-left:-20px;">                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>            </div>        </div>    </form></div><script type="text/javascript">    $(document).ready(function(){        $("#checkAll").click(function(){            $('input:checkbox').not(this).prop('checked', this.checked);        });    });</script></body></html>​

Now that code will give me a big table. Is there any way to make some link or button to make me jump onto a specific row in a table ? Because scrolling through the big table really not efficient

Answer

well, i found a simple solution : I just use <a href="#catname">catname</a> to simply jump into the category I needed on the table

Advertisement

Answer