jQuery動態插入行展開/摺疊

我有一個表結構如下;jQuery動態插入行展開/摺疊

<tr> 
    <td><div class="icon-chevron-right"></div></td> 
    <td><div>List 1</div></td> 
    </tr> 
    <tr> 
    <td><div class="icon-chevron-right"></div></td> 
    <td><div>List 2</div></td> 
    </tr>

現在的圖標圖像龍（Chevron）的點擊，我想馬上點擊下面的一行來顯示細節行（這應該是一個包含TR子表）。這應該插入/附加動態點擊任何列表行。

如何使用jQuery來做到這一點？任何參考例子都會非常有用。

來源

2014-03-31 testndtv

以下示例將創建一個新的tr（如果不存在），其中包含table元素，該元素位於存在點擊圖標的tr之下。

function createChildTable(string) 
{ 
    return $('<table>').append(
     $('<tr>').append(
      $('<td>').append(string) 
     ) 
    ); 
} 

$('.icon-chevron-right').click(function() { 
    var details = $(this).closest('tr').next('tr.details'); 
    if (details.length) details.show(); 
    else { 
    // first time clicked 
    details = $('<tr>').append(createChildTable('child table details')).addClass('details'); 
    $(this).closest('tr').after(details); 
    } 
});

Example Link

來源

2014-03-31 13:56:31 Bilal

我會說有這樣做主要有兩種方式，你就必須找出哪一個是最適合你;這取決於。

你在說什麼是在DOM中添加一行。在某些情況下這很好，這取決於這個摺疊行用於什麼。如果您希望能夠刪除摺疊的行並重新添加它，那麼如果您每次都必須通過JavaScript重新構建所有內部HTML，那麼它可能會使您的生活變得非常困難。

var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';  

$('.icon-chevron-right').click(function() { 
    $('.collapse').remove(); // Deletes all rows that has class "collapse" 
    collapseHTML.insertAfter($(this).closest('tr')); // Inserts what's stored in collapseHTML after "this closest tr" 
});

然後，當別人說，你可以加入那些行解決這個問題得到去像這樣：

<tr> 
    <td><div class="icon-chevron-right"></div></td> 
    <td><div>List 1</div></td> 
</tr> 
<tr class="collapse"> 
    <td colspan="2">This is my new row</td> 
</tr>

然後，你的CSS應該loook是這樣的：

.collapse { 
    display: none; 
} 

.collapse.active { 
    display: block; 
}

這意味着當您將active類添加到摺疊行時，它會從display: none;到display: block;。這你通過JavaScript/jQuery做的：

$('.icon-chevron-right').click(function() { 
    $('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows 
    $(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row) 
});

希望這有助於！

來源

2014-03-31 14:16:50 Genie

jQuery動態插入行展開/摺疊

回答

相關問題