Question

我需要设置jQuery来遍历表行。该表应始终只显示一行。单击链接时，应显示上一行或下一行。

基本的HTML结构是：

<div>
<a href="">Next</a>
<table>
  <tr><td>text1</td></tr>
  <tr><td>text2</td></tr>
  <tr><td>text3</td></tr>
  <tr><td>text4</td></tr>
</table>
<a href="">Previous</a>
</div>

任何帮助都将不胜感激。

Answer 1

目前还不清楚“骑行穿行”是什么意思，但是有些构建块：

您可以使用CSS选择器（几乎所有CSS3 plus some）来查找DOM中的元素。例如，这会找到所有a个元素：
```
var links = $('a');
```
您可以通过on将事件挂钩（或者如果您使用的是旧版jQuery，bind）。
处理事件时，您可以使用preventDefault来阻止事件的默认操作（例如，阻止点击链接跟踪链接）和/或stopPropagation （以防止事件冒泡DOM），或者通过从事件处理程序返回false来执行这两项操作。
jQuery是基于集合的，因此jQuery实例可以是多个元素的包装器，例如var rows = $('tr');。
您可以索引到jQuery实例以访问匹配集中该点的原始DOM元素，例如rows[2]是集合中的第三行。

举例来说，如果您将课程"next"添加到“下一个”链接：

<a href="" class="next">Next</a>

...您可以使用选择器找到它并挂钩click事件：

$('a.next').on('click', function(event) {
    // This function is called when the link is clicked
    // ...

    // Prevent the browser from actually following the link
    // and stop the event bubbling
    return false;
});

因此，您可以保留一个索引，该行是“当前”，索引到包装这些行的jQuery实例，并在点击时执行某些操作。

值得花一两个小时阅读API docs。字面意义需要很长时间，你会得到巨大的回报。

Answer 2

首先，为你的元素提供ID：

<a id="next" href="">Next</a>
<table id="myTable">
    <tr><td>text1</td></tr>
    <tr><td>text2</td></tr>
    <tr><td>text3</td></tr>
    <tr><td>text4</td></tr>
</table>
<a id="prev" href="">Previous</a>

然后，隐藏除第一个元素之外的所有元素：

$("#myTable tr").hide().eq(0).show();

最后，按“Next”和“Previous”按钮切换相邻兄弟的可见性（如果存在）：

$("#next").click(function(e) {
    e.preventDefault();
    $("#myTable tr:visible").next().show().prev().hide(); // Will do nothing if the visible element is the last one
});

$("#prev").click(function(e) {
    e.preventDefault();
    $("#myTable tr:visible").prev().show().next().hide(); // Will do nothing if the visible element is the first one
});

Jquery遍历表行

2 个答案: