jQuery кликабельная строка - PullRequest
Новая
       20

jQuery кликабельная строка

0 голосов
/ 30 октября 2010

У меня есть таблица, представляющая календарь, который может расширять и сворачивать строки таблицы. 

  <tr class="parent" id="month1">
    <th class="subheader">Januari</th>
    <th></th><th></th>
  </tr>
  <tr class="row child-month1" id="day-1">
    <td class="date"> 1 januari 2010</td>
    <td>Bedrag </td>
    <td>-817.0 </td>
  </tr>
  <tr class="row child-month1" id="day-2">
    <td class="date"> 2 januari 2010</td>
    <td>Bedrag </td>
    <td> 0 </td>
  </tr>

С помощью jQuery я делаю его кликабельным: 

<script type="text/javascript">
$(document).ready(function() {    
  $('tr.parent').click(function(){
    $(this).siblings('.child-' + this.id).toggle();
    return false;
  });
});
</script>

Теперь проблема в том,что окно прокручивается всегда вверх после щелчка строки таблицы.Я хочу, чтобы он оставался в положении прокрутки, которое было до щелчка.

Дочерние строки свернуты, как и предполагалось, но документ прокручивается наверх сразу после щелчка, даже если в конце .click я возвратил false ... Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 31 октября 2010

Хорошо, поэтому я попробовал предложения TJ для решения проблемы.

Я изменил var scrollTop = document.body.scrollTop на var scrollTop = window.pageYOffset, потому что каким-то образом document.body.scrollTop всегда возвращает 0 (не знаю почему).pageYOffset возвращает правильную позицию прокрутки для меня.Кстати, я сделал все это в Firefox.

Я получил этот код: 

  <div id="bottomspacer" style="height: 1000px; display: none; "></div>
  <script type="text/javascript">
  $('tr.parent').click(function(){
    $('#bottomspacer').show();
    var scrollTop = window.pageYOffset;
    $(this).siblings('.child-' + this.id).toggle();
    document.body.scrollTop = scrollTop;
    $('#bottomspacer').hide();
    return false;
  });
  </script>
0 голосов
/ 30 октября 2010

Даже если вы не вернули false в обработчике кликов, страница не должна прокручиваться в ответ на клик.

Возможно ли, что страница достаточно короткая, чтобы при некоторых строкахсвернуть, страница становится короче, чтобы она все вписывалась в область просмотра?(И, естественно, браузер прокручивается вверх, чтобы заполнить область просмотра.)

Обновление И если это так, вы можете попытаться сохранить scrollTop во время вызова: 

$(document).ready(function() {    
  $('tr.parent').click(function(){
    var scrollTop = document.body.scrollTop;        // <== Save the current value
    // *** Maybe append something to the page here to keep it tall***
    $(this).siblings('.child-' + this.id).toggle();
    // *** Maybe remove the appended thing now ***
    document.body.scrollTop = scrollTop;            // <== Restore it
    return false;
  });
});

Если все это находится в контейнере, отличном от body, вам, возможно, придется попытаться сохранить его в этом контейнере, но вы поймете, что идея.Это может быть не идеально в зависимости от того, насколько изменилась высота страницы, но это может помочь.

...