我有从数据库生成表的代码。代码是
<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>
现在，代码将给我一张大桌子。有没有办法制作一些链接或按钮，让我跳到表中的特定行？因为在大表格中滚动真的不是有效的
根据什么条件跳转到特定行，这取决于行中的数据吗？还是行号。。。如果是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()));
});
});
您可以使用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>您可以根据需要编辑此代码。阅读jQuery官方网站上关于.scrollTop的完整文章。
好吧，我找到了一个简单的解决方案：我只是使用<a href="#catname">catname</a>简单地跳到表上我需要的类别中