如何在jquery中將表列慢慢向右移動？

我有一張有六列的表格。我試圖先讓中間的兩列隱藏起來，但是當你點擊一個按鈕時，他們會將其他內容推出。現在我正在嘗試將它們隱藏在具有-z-index和絕對位置的另一列之後。我無法讓jquery動畫過渡。這是代碼。它消除了這個位置：絕對的和所有的，但它確實有一個很酷的轉換。在HTML只是一個表，其中TH的有ID並且細胞具有頭..如何在jquery中將表列慢慢向右移動？

css: 
    .hid{ 
    position: absolute; 
    z-index: -50; 
}

和繼承人的jQuery

$("button#expand").live('click',function(){ 

    cols =$("#col-1, [headers=col-1], #col-2, [headers=col-2] "); 
    ///this variable gets all the cells of the table column for both 1 and 2 

    if($(cols).hasClass("hid")){ 

     $(cols).removeClass("hid"); 
     //this works but it doesnt slide 
     $("button#expand").html("Hide"); 
    }

來源

2013-05-15 user718229

我不認爲這是可能的動畫表行或列的動畫。您必須使用看起來像表格行/列的單個div。 – Blazemonger

我第二次開火，但會建議實際重繪表格，而不是僅僅爲了訪問原因調整'div's –

jsFiddle Demo

你可以做的用這樣的div將你的內容包裹在表格單元中：

<table> 
<tr> 
    <td><div>wrapped content</div></td> 
</tr> 
</table>

一旦你完成了這個，你將能夠控制該div的大小，如果大小爲寬度：0，那麼td將顯示0.小心一些內置的分隔符，如邊框 - 間距和td填充。這裏有一個簡單的方法來實現這一目標：

var tds = []; 
var hidden = true; 
$(".h").each(function(){ 
var el = {}; 
el.h = $(this); 
el.width = el.h.width(); 
el.h.width(0); 
tds.push(el); 
}); 
$("#d").click(function(){ 
for(var i = 0; i < tds.length; i++){ 
    var el = tds[i]; 
    var target = hidden? el.width+"px" : "0px"; 
    el.h.animate({ width:target }); 
} 
hidden = !hidden; 
});

來源

2013-05-15 19:15:43

一個非常簡單的方法是你可以添加類各爲您構造表引用他們在列，以便在一列中的所有單元格獲取類「。 col-1「，等等。然後你的javascript看起來就像：

$(document).ready(function() { 
    cols = $(".col-2, .col-3"); 
    //or which ever columns you want to show 
    cols.hide(); 
    $("#expand").click(function(){ 
     cols.fadeIn(); 
    }); 
});

你可以看到這個here。

您可以使用.animate()推動其他列遠離出現的列，從而有點想象它。

來源

2013-05-15 19:42:06 Scott101

另一種選擇是僅使用[datatables]（http://datatables.net/）並應用這個[示例]（http://www.datatables.net/examples/api/show_hide.html）到您的項目。 – Scott101

如何在jquery中將表列慢慢向右移動？

回答

相關問題