如何排列表行列表並在jQuery中執行slideUp（）或slideDown（）？

說我有一個50行的表。我在該表中有父母/子女關係。我試圖點擊父行並展開/摺疊所有子行。我有這樣的工作，但我想把一組行作爲一組。我將如何做到這一點？如何排列表行列表並在jQuery中執行slideUp（）或slideDown（）？

假設用戶點擊tr中的鏈接。這是用戶點擊行內鏈接時的示例功能。請注意TODO：這就是我想要解決的問題。

var row = $(this).closest("tr") 

    while(true) { 

     if(parseInt(row.attr("data-Level"), 10) > selectedRowLevel) 
{ 
    // TODO: I want to put all these rows in a queue maybe and the slideUp all together, not just row by row. 
    row.slideToggle(); 
} 
else 
break; 

row = row.next(); 

}

來源

2012-12-10 Shane

我基本上重現這一DevExpress的網格控件樹視圖行爲。所以你說你不可能在表格行上顯示一些幻燈片向上或向下的動畫？ http://demos.devexpress.com/ASPxTreeListDemos/Selection/FocusedNode.aspx – Shane

-1

向所有這些指定行添加一個新類。

然後對該新創建的類執行slideUp()或slideDown()。

來源

2012-12-10 21:15:29 KingKongFrog

這是一個簡單的解決方法，解決了我如何將錶行的顯示/隱藏組合在一起的問題。我已經實現了這一點。謝謝。 – Shane

您無法使用JavaScript向上或向下滑動表格行。你只能顯示/隱藏它們。這只是表格呈現方式的限制。

只能通過這種方式爲塊級元素設置動畫。如果用div和具有固定寬度跨度的單元替換了行，則可以獲取動畫。

http://jsfiddle.net/mblase75/WgN2N/

HTML：

<div class="tr"> 
    <span class="td">asdf</span> 
    <span class="td">qwer</span> 
    <span class="td">zxcv</span> 
</div>

CSS：

.td { 
    display: inline-block; 
    width: 100px; 
    height: 20px; 
    padding: 10px; 
    background: #eee; 
} 
.tr { 
    display: block; 
}

來源

2012-12-10 21:27:31 Blazemonger

+1向我解釋關於表格行上的動畫並向我展示另一種技術。 – Shane

如何排列表行列表並在jQuery中執行slideUp（）或slideDown（）？

回答

相關問題