javascript實現table單元格點擊展開隱藏效果

如果table元素的高如果不設置，是根據內容撐開的，根據這個規則，可以用js控制默認狀態下table-cell的寬度，並將這一列的table-cell設置為dispaly：block，這樣多出來的內容就會被隱藏掉，添加點擊事件，把table-cell的display在block和table-cell之間切換，就能實現點擊展開隱藏效果啦！

js代碼如下：

$('.cell').click(function(){
    if($(this).css('display')=='block'){
        console.log('ok');
        $(this).css('display'，'table-cell');
    }else{
        $(this).css('display'，'block');
    }
});

超級簡單！不過設置為block之后，表格的border重疊就會失效，要對這個動態的列單獨再設置一下樣式，去掉它的邊框~