-1

我的代码显示了动态创建的不同长度的表格，并带有显示/隐藏额外表格行的“展开”和“压缩”按钮。它有效，但它很丑。我很想为它制作动画，但显然这是不可能的。这可能是如何在表格行上使用 slideDown（或显示）功能的副本？，在这种情况下可以随意关闭它，但那已经有四年了，我希望可能有一个新的/更好的解决方案（我无法让它们工作，但我可以继续尝试）。如果动画不是一个选项，也许有人可以建议一些其他看起来不错的设计功能？

$(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();    
        })
        )

    });
});
4

1 回答 1

0

I don't know of a way to collapse certain parts of a table, but I did something like this before:

   <div onclick="$('#myTable').toggle(300)">
      Name of table here
      <div id="myTable">
        <table>
          <tr><td>I am a cell</td></tr>
          <tr><td>I am another cell</td></tr>
        </table>
      </div>
    </div>

This creates a div where clicking on the title expands/collapses the table. Is this close to what you're looking for?

于 2013-08-08T23:13:27.220 回答