我有一個大表列出了約50名用戶和他們的賬戶,包括他們有「項目」的數量一些簡單的數據。當點擊用戶行時,會在下面展開更多行,以顯示每個項目的詳細信息。大多數用戶只有不到20個項目,所以這對瀏覽器來說並不是很重要。然而,有幾個用戶擁有100多個項目(其中一個擁有500多個項目),當點擊用戶行時,瀏覽器停頓的時間爲1-4秒。需要通過500多個表格行循環瀏覽器正在窒息
錶行設置,以便與.project
類的任何行默認情況下隱藏,並在用戶行點擊(無.project
類)當與.project
類的所有後續行具有類.open
其中加入顯示它們。
關於如何使運行速度更快的建議?有沒有更好,更乾淨的方法來達到相同的效果?
下面是HTML的一個簡化版本:
<table>
<tr>
<td>Username</td><td>Email</td><td>10 Projects</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr>
<td>Username</td><td>Email</td><td>3 Projects</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
<tr class="project">
<td> </td><td> </td><td>Project Name</td>
</tr>
</table>
...和JS:
(function($) {
$.fn.viewProjects = function() {
this.each(function() {
$(this).click(function(){
var projects = $(this).nextUntil(':not(.project)'); // get all rows that follow and have the '.project' class
if ($(this).hasClass('focused')) { // collapse
$(this).removeClass('focused');
projects.each(function(n, proj){
$(proj).removeClass('open');
});
}
else { // expand
$(this).addClass('focused');
projects.each(function(n, proj){
$(proj).addClass('open');
});
}
});
});
};
$('tr:not(.project)').viewProjects();
})(jQuery);
你有沒有考慮過或者你打算分頁結果?所以說,在給定的時間只顯示20個用戶項目。 –
分頁是另一種解決方案 - 好主意@happytimeharry – BumbleB2na