似乎有时有效，有时却无效。使用起来非常粗糙和可怕。
简化布局:
var index = 1
function next() {
if (index <= 4){
window.location.replace('#r' + index.toString());
index++;
}
}
function previous() {
if (index > 1){
index--;
window.location.replace('#r' + index.toString());
}
}.what {
height: 500px;
}<a href="#" onclick='next()' id="nxt">Next</a>
<a href="#" onclick='previous()' id="prev">Previous</a>
<body>
<table>
<tr class="what">
<td id="r1">r</td>
<td>o</td>
<td>w</td>
<td>1</td>
</tr>
<tr class="what">
<td id="r2">r</td>
<td>o</td>
<td>w</td>
<td>2</td>
</tr>
<tr class="what">
<td id="r3">r</td>
<td>o</td>
<td>w</td>
<td>3</td>
</tr>
<tr class="what">
<td id="r4">r</td>
<td>o</td>
<td>w</td>
<td>4</td>
</tr>
</table>
</body>出于某种原因，它似乎只适用于 id#r1 和 id#r4。有没有更好、更流畅的方法来做到这一点？
最佳答案
链接仍在执行它们通常执行的操作。这意味着尝试将位置设置为 #r1 和尝试将位置设置为 # 的链接之间会存在干扰。
相反，通过 javascript 设置事件处理程序并使用 preventDefault() 来阻止链接执行它们的默认操作。
我还冒昧地纠正了一些其他的小错误。
var index = 0
function next(event) {
if (index < 4){
index++;
window.location.replace('#r' + index.toString());
}
event.preventDefault();
}
function previous(event) {
if (index > 1){
index--;
window.location.replace('#r' + index.toString());
}
event.preventDefault();
}
document
.getElementById('nxt')
.addEventListener( 'click', next );
document
.getElementById('prev')
.addEventListener( 'click', previous );table {
width:100%;
}
.what {
height: 100px;
margin: 10px;
background-color: pink;
}<a href="#" id="nxt">Next</a>
<a href="#" id="prev">Previous</a>
<body>
<table>
<tr class="what">
<td id="r1">r</td>
<td>o</td>
<td>w</td>
<td>1</td>
</tr>
<tr class="what">
<td id="r2">r</td>
<td>o</td>
<td>w</td>
<td>2</td>
</tr>
<tr class="what">
<td id="r3">r</td>
<td>o</td>
<td>w</td>
<td>3</td>
</tr>
<tr class="what">
<td id="r4">r</td>
<td>o</td>
<td>w</td>
<td>4</td>
</tr>
</table>
</body>关于javascript - 跳下 anchor (在 table 上)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40032249/