我有从我的数据库生成表格的代码。代码是<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
TA贡献1871条经验 获得超13个赞
你想跳转到特定行的条件是什么，是否取决于行中的数据？或行号？...如果它是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
TA贡献1770条经验 获得超3个赞
您可以使用 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 官方网站上阅读有关的完整文章。
- 3 回答
- 0 关注
- 183 浏览
添加回答
举报
0/150
提交
取消