追加のテーブル行を表示/非表示にする「展開」ボタンと「圧縮」ボタンを使用して、動的に作成されたさまざまな長さのテーブルを表示するコードがあります。動作しますが、醜いです。アニメ化したいのですが、どうやら無理そうです。これはおそらく、表の行で SlideDown (または show) 関数を使用する方法の複製ですか? 、その場合はお気軽に閉じてください。ただし、それは 4 年前のものであり、新しい/より良い解決策があることを望んでいました (それらを機能させることはできませんでしたが、試し続けることができます)。アニメーション化がオプションではない場合、誰かが適切に見える他のデザイン機能を提案できますか?
$(document).ready(function(){
$('.table').each(function(){
$(this).find("tr:even").addClass("even");
$(this).find("tr:odd").addClass("odd");
var numShown = 2; // Initial rows shown & index
var $table = $(this).find('tbody'); // tbody containing all the rows
var numRows = $table.find('tr').length; // Total # rows
var tableWidth = $table.find('tr:first td').length;
var expandDiv = '<tbody class="more"><tr><td colspan="' +
tableWidth + '"><div>Show More</div</tbody></td></tr>';
var condenseDiv = '<tbody class="less"><tr><td colspan="' + $table.find('tr:first td').length + '"><div>Show Less</div</tbody></td></tr>';
if(numRows>numShown){
$(function () {
// Hide rows and add clickable div
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
.after(expandDiv);
})
};
$(this).on('click', '.more', (function() {
// numShown = numShown + numMore;
$(this).remove();
$table.find('tr').show();
$table.after(condenseDiv);
}));
$(this).on('click', '.less', (function() {
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
.after(expandDiv);
$(this).remove();
})
)
});
});