Question

大师和专家，我正在寻求你的帮助，试图在HTML表格中相对于目标第N行（使用索引）移动中心位置的div滚动位置。

应本网站用户的要求，我改编了现有代码，以匹配相关的javascript函数，需要在下面进一步修改。

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

为了便于参考，我也创造了一个小提琴：http://jsfiddle.net/3YbSe/1/

我是jQuery友好的：）

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) 
    }
}

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>

Answer 1

好的，我想我想出了你想要完成的事情。您可以使用position()函数，然后使用一些简单的数学运算。您还需要为表格提供一个位置，以便您可以检查突出显示的<tr>在其所在表格中的位置，而不是容器。这是一些代码：

//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);

<强> DEMO

移动div容器滚动位置相对于HTML表格行中的第n行

1 个答案: