Блог

У меня есть HTML-таблица в таблице большего размера, и эта внутренняя таблица имеет полосу прокрутки.

Как я могу сделать кнопки, которые прокручиваются вверх или вниз во внутренней таблице?

ниже приведен мой фрагмент кода

 script part...

<script>
function scroll(p) {
    var offset = $('#'   p).offset();
    $('.wapper').animate({scrollTop: offset.top}, 400)
};
</script>

cell in inner table...
            <td style="width: 190px;">
                <button onclick="scroll('up')">up</button>
                <div class="wapper">
                    <table id="category" class="table--inner">
                    <tbody>
                        <tr>
                            <td>
                                <div id="top"></div>
                                <img src="{% static 'an image' %}">
                            </td>
                        </tr>
                        ...
                        <tr>
                            <td>
                                <div id="bottom"></div>
                                <img src="{% static 'another image' %}">
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <button onclick="scroll('bottom')">down</button>
            </td>
 

То, что тебе нужно сделать:

1. Поменяйте местами 2 кнопки прокрутки и измените название своей функции на что-нибудь, просто не используйте scroll .
2. Добавьте контейнер div для вашей внутренней таблицы и кнопок (мы будем использовать этот контейнер для прокрутки).
3. Добавьте css в свой контейнер.

Скрипт:

     <script>
            function scrollMe(el, p) {
                var offset =
                    p === 'up' ? 0 : $(el).closest('.td-container')[0].scrollHeight; // this is to get the parent container's scroll height
                $('.td-container').animate({ scrollTop: offset }, 400);
            }
    </script>
 

HTML

 cell in inner table...
            <td style="width: 190px;">
                <div class="td-container">
                <button onclick="scrollMe(this, 'bottom')">Scroll Down</button>
                <div class="wapper">
                    <table id="category" class="table--inner">
                    <tbody>
                        <tr>
                            <td>
                                <div id="top"></div>
                                <img src="{% static 'an image' %}">
                            </td>
                        </tr>
                        ...
                        <tr>
                            <td>
                                <div id="bottom"></div>
                                <img src="{% static 'another image' %}">
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <button onclick="scrollMe(this, 'up')">Scroll Up</button>
                </div>
            </td>
 

Стиль CSS для td-контейнера

 .td-container {
  max-height: 40px;  // set preferred max-height of container to scroll
  overflow-y: auto;  // set scroll behavior to auto
}