Question

您能告诉我如何使用jquery将选定的行设置为div的顶部并使用以下滚动条样式

#sc {
    border:1px solid black;
    width:450px;
    height:80px;
    overflow:scroll;
}

<div id="sc">
  <table id="myTable" border="1">
    <th style="width:100px;">Camp No</th>
    <th style="width:140px;">Lat</th>
    <th style="width:140px;">long</th>
    <tbody>
      <tr></tr>
    </tbody>
  </table>
</div>

这是我的javascript代码：

google.maps.event.addListener(marker, 'click', function () {
  $('tr.highlighted').removeClass('highlighted');
  $('tr.' + this.id).addClass('highlighted');

  $('tr.' + this.id).animate({
    scrollTop: $('div')[0].scrollHeight
  }, 0);
});

Answer 1

我注意到了一些事情：

1）您可能无法使用数字启动类名称（可能更合适的解决方案是使用id而不是类来标识行）。

使用类的示例：

$('.C' + this.id).addClass('highlighted');

id：

的示例

$('#' + this.id).addClass('highlighted');

2）要使滚动工作，您需要获得要显示的实际行的偏移量。

$('#sc').scrollTop( $('.C' + this.id).offset().top);

小提琴：

http://jsfiddle.net/6yhP3/5/

Answer 2

这将它移到顶部：

$(document.body).on('click', '#myTable tr', function (event) {
    $(this).prependTo('#myTable');
});

http://jsfiddle.net/6yhP3/9/

不确定您正在寻找什么样的动画。

Answer 3

首先，您的标记格式不正确。您应该围绕<th/>标记，并且该行周围至少有一个<tr/>甚至一个<thead/> ...

<div id="sc">
    <table id="myTable"border="1">
        <tr>
            <th style="width:100px;">Camp No</th>
            <th style="width:140px;">Lat</th>
            <th style="width:140px;">long</th>
        </tr>
        <tbody>
            <tr>

            </tr>
        </tbody>
    </table>
</div>

其次，您没有为第一个<tr/>分配任何课程，这意味着您的来电：

$('tr.' + this.id).animate(...)

将无法找到任何动画效果。

如何动画选择到滚动条顶部

3 个答案: