Question

我正在将一个HTML表单提交给Python脚本，该脚本在HTML表格中生成结果。但是，当页面显示在页面中时，我希望某些列处于折叠状态，因此我可以使用复选框展开它们，如下所示：

$(document).ready(function(){
   $(".collapse").hide();
   $("#checkme").click(function(){
       if($("#checkme").is(":checked")){
           $(".collapse").show();
       }else{
           $(".collapse").hide();
       }
   });
});

问题是，表在最初加载时会占用所有列，然后默认为折叠状态（即，列被隐藏）。如何在表格完全加载并且其某些列已折叠之前显示“正在加载...”文本？非常感谢提前。

Answer 1

最初隐藏设置表可见性，当DOM准备就绪时执行此操作

$(document).ready(function(){ $("table.mygrid").show();});

Answer 2

你实际上可以在CSS中简单地定义它：

.collapse { 显示：无; }

Answer 3

生成标记时，在要隐藏的列中的每个表格单元格上放置一个类，例如“可隐藏单元格”。在表格中，添加一个名为“table-hide-hideable-cells”的类。

<table id="the-table" class="table-hide-hideable-cells">
  <tr>
    <td>Name</td>
    <td class="hideable-cell">Hide me</td>
  </tr>
</table>

在CSS中：

table.table-hide-hideable-cells .hideable-cell {display: none}

现在，在渲染表格时，默认情况下将隐藏这些单元格。要显示它们，只需从表中删除“table-hide-hideable-cells”类。

$(document).delegate('#checkme', 'click', function() {
  $('#the-table').toggleClass('table-hide-hideable-cells'), !$(this).is(':checked'));
});

我经常使用这种技术，父元素上的单个选择器可以控制子元素集合的样式。

以折叠状态显示表列

3 个答案: