gpt4 book ai didi

javascript - 如何在按钮单击 jQuery 时逐行滚动表格

转载 作者:行者123 更新时间:2023-12-05 02:33:19 24 4
gpt4 key购买 nike

我有固定高度和可滚动主体的表格,我添加了用于逐行滚动的按钮。

想法是通过用户点击逐行滚动。

现在我创建了用于向下滚动的函数,但这对我不利,有些我需要创建函数以在单击向下一行时滚动表格。

$('#more-arrows').click(function () {
var scrollBottom = Math.max($('.table-udt').height() - $('tbody').height() / 200 + 1000, 0);
$('tbody').scrollTop(scrollBottom).animate({
scrollBottom: 0
}, 1000);
});

JsFiddle

所以我想滚动#more-arrows 点击,一行一行滚动到底部。

最佳答案

您可以通过确定行的位置然后使用 scrollTop 移动到它来完成此操作。这是一个让你入门的片段:

let i = 0
$('#more-arrows').click(function(e) {
if (i < $(`.scrollTable tr`).length) {
let position = $(`.scrollTable tr:eq(${i})`).offset().top;
$('.scroll').animate({
scrollTop: $('.scroll').scrollTop() + position
}, 300);
i++
} else {
i = 0
}
});
table {
margin: 0 1rem;
background: #fff;
width: 98%;
border-spacing: 0 5px;
border-collapse: separate;
border-radius: .25rem;
}

thead tr:first-child {
background: #E84C3D;
color: #fff;
border: none;
}

th:first-child,
td:first-child {
padding: 0 15px 0 20px;
}


tr {
width: 100%;
height: 40px;
}

th {
font-size: 20px;
border-collapse: separate;
border-spacing: 5em;
font-weight: 500;
}

thead tr:last-child th {
border-bottom: 3px solid #ddd;
}

tbody tr:hover {
background-color: #f2f2f2;
cursor: default;
}

tbody tr:last-child td {
border: none;
}

tbody td {
border-bottom: 1px solid #ddd;
}

td:last-child {
text-align: right;
padding-right: 10px;
}

.scroll {
max-height: 360px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<table class="scrollTable">
<tr>
<td>Text1 Text</td>
<td>Text1 Text</td>
<td>Text1 Text</td>
<td>Text1 Text</td>
</tr>
<tr>
<td>Text2 Text</td>
<td>Text2 Text</td>
<td>Text2 Text</td>
<td>Text2 Text</td>
</tr>
<tr>
<td>Text3 Text</td>
<td>Text3 Text</td>
<td>Text3 Text</td>
<td>Text3 Text</td>
</tr>
<tr>
<td>Text4 Text</td>
<td>Text4 Text</td>
<td>Text4 Text</td>
<td>Text4 Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>More Text</td>
<td>More Text</td>
<td>More Text</td>
<td>More Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>More Text</td>
<td>More Text</td>
<td>More Text</td>
<td>More Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
</table>
</div>

<div class="down-row">
<svg id="more-arrows">
<polygon class="arrow-top" points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 " />
<polygon class="arrow-middle" points="37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7 " />
<polygon class="arrow-bottom" points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 " />
</svg>
</div>

关于javascript - 如何在按钮单击 jQuery 时逐行滚动表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71015984/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com