Jquery循環遍歷錶行

-3

我需要設置jQuery循環遍歷錶行。該表應始終只顯示一行。當我點擊鏈接時，應該顯示前一行或下一行。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>

任何幫助，將不勝感激。

來源

2012-01-31 ChandraZ

什麼問題？你有什麼嘗試？你遇到了什麼麻煩？ – 2012-01-31 22:02:55

你是什麼意思的「循環行」？ – PeeHaa 2012-01-31 22:04:28

首先，給IDS你的元素：

<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").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 
});

來源

2012-01-31 22:08:27 mgibsonbr

目前還不清楚「騎自行車行「，但一些積木：

您可以使用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閱讀。從字面上看需要很長時間，你會得到巨大的回報。

來源

2012-01-31 22:08:43

Jquery循環遍歷錶行

回答

相關問題