如何使按钮跳转到指定的表格行

Question

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">&#x20A8; <?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 1

With what criteria do you want to jump to a specific row, is it depending on the data in the row?您想以什么标准跳转到特定行，是否取决于行中的数据？ or the row number?还是行号？ ... If it is the td row number, add classes to the td element, for example: <td class="catname"><?php echo $row['catname']; ?></td> ... 如果是td行号，则在td元素中添加类，例如： <td class="catname"><?php echo $row['catname']; ?></td> <td class="catname"><?php echo $row['catname']; ?></td> and create a javascript function where you can input a row number and it returns the value as so: <td class="catname"><?php echo $row['catname']; ?></td>并创建一个 javascript function ，您可以在其中输入行号并返回值如下：

function finder(n){
    let i;
    for(i = 0; i < $('td.catname').length; i++){
        return $('td.catname').eq(n).text();
    }
}

such that you can call the function finder() and it will return the value contained in the row.这样您就可以调用 function finder() ，它将返回该行中包含的值。

$(document).ready(function(){
    $('#some_button').click(function(){
        $('#my_output').text(finder($('#my_input').val()));
    });
});

Answer 2

You can jump to a specific row using jQuery .scrollTop() method which is used to get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.您可以使用 jQuery .scrollTop()方法跳转到特定行，该方法用于获取匹配元素集中第一个元素的滚动条的当前垂直 position 或为每个匹配元素的滚动条设置垂直 Z4757FE07FD492A8BE0EA6A7D60D63 .

Look at the below example which i have prepared to scroll in a large table:看看下面我准备在一个大表中滚动的例子：

 <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> //here 'trHeight' is calculated based on max height of scroll container //formula to calculate is: max-vertical-scroll-position / no of table rows //you can get scroll bar position using $('selector').scrollTop() var trHeight = 21.824; $(function() { for (var i = 0; i <= 1000; i++) { $('#mytable').append('<tr class=' + i + '><td>Row ' + i + ' </td></tr>'); } }); function navigate() { $("." + $("#rowno").val()).addClass("highlight"); var scroll = parseInt($("#rowno").val()) * trHeight; $('#container').scrollTop(scroll); alert("Current scroll bar position is " + $('#container').scrollTop()); } </script> <style>.highlight { background-color: red; } #container { border: 1px solid black; width: 400px; max-height: 200px; overflow: scroll; overflow-y: scroll; overflow-x: hidden; } </style> </head> <body> Enter row no to jump: <input type="text" id="rowno" /> <button onclick="navigate();">Go</button> <br/><br/> <div id="container"> <table id="mytable"> </table> </div> </body> </html>

You can edit this code according to your need.您可以根据需要编辑此代码。 read the full article about .scrollTop on jQuery official site .在jQuery 官方网站上阅读有关.scrollTop的完整文章。

Answer 3

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好吧，我找到了一个简单的解决方案：我只是使用<a href="#catname">catname</a>来简单地跳转到我需要在桌子上的类别

如何使按钮跳转到指定的表格行

问题描述

3 个解决方案

解决方案1
0 2020-05-10 07:18:42

解决方案2
0 2020-05-10 07:59:34

解决方案3
0 已采纳 2020-05-14 08:20:24

如何使按钮跳转到指定的表格行

问题描述

3 个解决方案

解决方案1 0 2020-05-10 07:18:42

解决方案2 0 2020-05-10 07:59:34

解决方案3 0 已采纳 2020-05-14 08:20:24

解决方案1
0 2020-05-10 07:18:42

解决方案2
0 2020-05-10 07:59:34

解决方案3
0 已采纳 2020-05-14 08:20:24