Javascript 将div容器滚动位置reative移动到HTML表行中的第n行_Javascript_Jquery

Javascript 将div容器滚动位置reative移动到HTML表行中的第n行

javascript jquery

Javascript 将div容器滚动位置reative移动到HTML表行中的第n行,javascript,jquery,Javascript,Jquery,各位大师和专家，我正在寻求您的帮助，尝试在HTML表中相对于目标第n行（使用索引）将div滚动位置移动到中间位置应该站点用户的请求，我已对现有代码进行了修改，以匹配需要进一步修改的javascript函数如何使用函数highlight（）将功能添加到现有jQuery javascript代码中，以不仅高亮显示指定的目标行，还将div容器滚动位置同步移动到中心位置，相对于HTML表中的目标第n行为了便于参考，我还制作了一把小提琴：我对jQuery很友好：） HTML标记： <!DOC

各位大师和专家，我正在寻求您的帮助，尝试在HTML表中相对于目标第n行（使用索引）将div滚动位置移动到中间位置

应该站点用户的请求，我已对现有代码进行了修改，以匹配需要进一步修改的javascript函数

如何使用函数highlight（）将功能添加到现有jQuery javascript代码中，以不仅高亮显示指定的目标行，还将div容器滚动位置同步移动到中心位置，相对于HTML表中的目标第n行

为了便于参考，我还制作了一把小提琴：

我对jQuery很友好：）

HTML标记：

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<style type="text/css">
#data_container {
    height: 100px;
    border: 1px solid red;
    width: auto;
    overflow: scroll;
}
.highlight {

    background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data tbody tr').length

$("#maxrows").val(rowCount)

function highlight(tableIndex) {

    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > rowCount) {

        tableIndex = 0;
    }
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');

        $("#rownum").val(tableIndex+1)   
    }
    else {
        $("#rownum").val(0) 
    }
}



$( "#data tbody tr" ).click(function() {
    highlight($(this).index());
});


}


</script>

</head>

<body>


<div id="data_container">
<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>#</th>
            <th>Color</th>
            <th>Fruit</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>red</td>
            <td>kiwi</td>
            <td>Lindsay</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>2</td>
            <td>blue</td>
            <td>mangos</td>
            <td>Sarah</td>
            <td>open</td>
        </tr>
        <tr>
            <td>3</td>
            <td>green</td>
            <td>oranges</td>
            <td>Joseph</td>
            <td>hold</td>
        </tr>
        <tr>
            <td>4</td>
            <td>yellow</td>
            <td>pears</td>
            <td>Jenny</td>
            <td>open</td>
        </tr>
        <tr>
            <td>5</td>
            <td>orange</td>
            <td>bananas</td>
            <td>Mike</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>6</td>
            <td>purple</td>
            <td>lemon</td>
            <td>Jerry</td>
            <td>open</td>
        </tr>
        <tr>
            <td>7</td>
            <td>teal</td>
            <td>apples</td>
            <td>Larry</td>
            <td>hold</td>
        </tr>
    </tbody>
</table>
</div>
Row Number:
<br>
<input type="text" id="rownum"><br>
of
<br>
<input type="text" id="maxrows" readonly>
</body>
</html>


#数据容器{
高度：100px；
边框：1px纯红；
宽度：自动；
溢出：滚动；
}
.亮点{
背景色：rgb（255,0,0）；
}
window.onload=函数（）{
var rowCount=$（'#data tbody tr'）。长度
$（“#maxrows”）.val（行计数）
功能突出显示（tableIndex）{
//只是一个简单的检查。如果.highlight已到达最后一个，请重新开始
如果（（tableIndex+1）>行计数）{
tableIndex=0；
}
//元素是否存在？
if（$（'#data tbody tr:eq（'+tableIndex+'））.length>0）{
//删除其他高光
$（'#data tbody tr'）。removeClass（'highlight'）；
//突出你的目标
$（'#data tbody tr:eq（'+tableIndex+'））.addClass（'highlight'）；
$（“#rownum”）.val（tableIndex+1）
}
否则{
$（“#rownum”）.val（0）
}
}
$（“#数据体tr”）。单击（函数（）{
突出显示（$（this.index（））；
});
}
#
颜色
果
名称
地位
1.
红色
几维鸟
林赛
关闭
2.
蓝色
芒果
莎拉
打开
3.
绿色
橘子
约瑟夫
持有
4.
黄色的
梨
珍妮
打开
5.
橙色
香蕉
迈克
关闭
6.
紫色
柠檬
杰瑞
打开
7.
水鸭
苹果
拉里
持有
行数：




属于

好的，我想我知道了你想要实现的目标。您可以使用

position（）

函数进行此操作，然后再进行一些简单的数学运算。您还需要为表格指定一个位置，以便检查高亮显示的

相对于其所在表格的位置，而不是容器的位置。以下是一些codez：

//Scroll to cntr position
var trPos = $("tr.highlight").position();        
var trCtr = ($("tr.highlight").height()) / 2;
var dataTblctr = ($("#data_container").height()) / 2;

$("#data_container").scrollTop(trPos.top - dataTblctr + trCtr);

我真的搞不懂你想干什么？你是说你想让表格和你的滚动事件一起滚动？就是这样！相对于目标行自动滚动div（中心位置）。太棒了！非常感谢你。伊恩给你带来的另一个巨大的头痛得到了解决：）

//Scroll to cntr position
var trPos = $("tr.highlight").position();        
var trCtr = ($("tr.highlight").height()) / 2;
var dataTblctr = ($("#data_container").height()) / 2;

$("#data_container").scrollTop(trPos.top - dataTblctr + trCtr);