js实现滚动条滚动到某个位置便自动定位某个tr
版权申诉
32 浏览量
2021-01-19
15:21:26
上传
评论
收藏 70KB PDF 举报
js实现滚动条滚动到某个位置便自动定位某个实现滚动条滚动到某个位置便自动定位某个tr
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下
js代码
<strong><script type="text/javascript">
function test(){
var $objTr = $("#location"); //找到要定位的地方 tr
$objTr.css("background-color","lightgray"); //设置要定位地方的css
var objTr = $objTr[0]; //转化为dom对象
$("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr
}
</script></strong>
html
<body>
<h1>定位</h1>
<div id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;">
<table id="tableId" style="width:400px;background-color:yellow" align="center" border="0">
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/>
<td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
</table>
</div>
<input type="button" value="定位到一行" onclick="test()"/>
</body>
效果图：
资源评论
