Question

我有代码显示动态创建的不同长度的表，使用'expand'和'condense'按钮显示/隐藏额外的表行。它有效，但很难看。我喜欢给它制作动画，但显然这是不可能的。这可能是How to Use slideDown (or show) function on a table row?的重复，在这种情况下随意关闭它，但那已经四年了，我希望可能有一个新的/更好的解决方案（我无法让这些工作，但我可以继续尝试）。如果动画不是一个选项，也许有人可以建议一些看起来不错的其他设计功能？

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

    });
});

Answer 1

我不知道如何折叠桌子的某些部分，但我之前做过类似的事情：

   <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>

这会创建一个div，点击标题会扩展/折叠表格。这接近你正在寻找的东西吗？

使用jquery动画表（如果可能）

1 个答案: