jQuery scrollTo在c#asp.net中选中的行

时间:2015-08-17 03:42:10

标签: javascript c# jquery html asp.net

我想滚动到所选的行,但它不起作用。我已经在html中将滚动条添加到了div表外。它快速滚动并且不会随选定的行移动。我使用的jquery版本是1.8.11。它在小提琴中运行良好,但在asp.net c#代码中没有。我不知道问题是什么。我是asp.net的新手。提前致谢。 工作小提琴,但它不在c#asp.net中工作。 http://jsfiddle.net/adiioo7/Lavvunhj/12/

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewBag.Message %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <div style="overflow:scroll;height:120px;width:450px;" id="your_div">
    <table id="table1">
        <thead>
            <tr>
                <th>column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
            </tr>
        </thead>
        <tbody>
            <!--fecthed records from database and filled in rows-->
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item0</td>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <!-- //all rows likewise -->
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $tables = $('#table1'); //gets the table
    limitcount = 2;
    mQ = []; //my queue
    timer = null;
    $tr = $('tr');
    //            alert("button clicked");
    $('#result').html(''); //demo code
    //   alert("00");
    $tr.removeClass('selected');
    //   alert("11");
    var t = 0,
    $tbltr;
    var t1 = [];
    $tables.find('tr').each(function () {
        mQ.push($(this));
    });
    // mQ.push($tbltr.get(t1[0]));
    //            mQ.push($tbltr.get(t1[1]));
    timer = setInterval(function () {
        if (mQ.length === 0) {
            clearInterval(timer);
            return false;
        }
        $tr.removeClass('selected');
        $(mQ.shift()).click().addClass('selected');
    }, 1000);

    $(document).delegate('tr', "click", function (e) {
        var _offset = $(this).offset();
        var _topoffset = _offset.top;
        var objDiv = document.getElementById("your_div");
        _topoffset = _topoffset - $(this).height();
        objDiv.scrollTop = objDiv.scrollTop + _topoffset;
    });
</script>
<style>
    .selected {
        background-color:Red;
        color:White;
    }
</style>
</asp:Content>

0 个答案:

没有答案