如何使按钮跳转到指定的表格行
我有从我的数据库生成表格的代码。代码是
<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>
现在该代码将给我一张大桌子。有什么方法可以制作一些链接或按钮让我跳到表格中的特定行吗？因为滚动大表确实效率不高
青春有我3回答
-
慕桂英4014372
你想跳转到特定行的条件是什么，是否取决于行中的数据？或行号？...如果它是td行号，则向td元素添加类，例如：<td class="catname"><?php echo $row['catname']; ?></td>并创建一个 javascript 函数，您可以在其中输入行号并返回值，如下所示：function finder(n){ let i; for(i = 0; i < $('td.catname').length; i++){ return $('td.catname').eq(n).text(); }}这样您就可以调用该函数finder()，它将返回行中包含的值。$(document).ready(function(){ $('#some_button').click(function(){ $('#my_output').text(finder($('#my_input').val())); });}); -
德玛西亚99
您可以使用 jQuery 方法跳转到特定行，.scrollTop()该方法用于获取匹配元素集中第一个元素的滚动条的当前垂直位置，或者为每个匹配元素设置滚动条的垂直位置。看看下面的例子，我准备在一个大表格中滚动：<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>您可以根据需要编辑此代码。.scrollTop在jQuery 官方网站上阅读有关的完整文章。 -
慕的地8271018
好吧，我找到了一个简单的解决方案：我只是用来<a href="#catname">catname</a>简单地跳转到我需要的类别
随时随地看视频慕课网APP
PHP