javascript - 有没有办法创建 "inline-none"CSS 效果？将被隐藏，但保留它在页面上占用的空间

Question

我希望能够隐藏一些按钮(在 3 列表格显示的右列中)。我愿意

  <tr id="a_row_<?php echo $a_id ?>">
    <td id="linked_general_name_<?php echo $a_id ?>"><a target="_blank" href="index.php?general_assessments&stats=<?php echo $a_id ?>"><?php echo $label ?></a></td>
    <td><a href="index.php?viewcompany&id=<?php echo $c_id ?>" target="_blank"><?php echo $c_name ?></a></td>
    <td class="text-right" style="vertical-align:middle;">
      <a templateID="<?php echo $a_id ?>" href="#" class="label label-success"><i class="fa fa-cogs" style="padding-right:5px;"></i>Create Template</a>
    </td>
  </tr>

好吧，我正在做的是使用 jQuery 来隐藏 templateID 属性项。我也使用它，以便我基本上可以从链接中获取 ID 并使用它来填充模式(别担心，这是针对单个用户管理面板的)。

这是 jQuery...

$("#something").on("click", function(e){
 e.preventDefault(); // works as intended
 var aID = $(this).attr("templateID"); // works as intended
 $("[templateID]").css("display", "none"); // this works ~ hides all buttons
 // more stuff below... 
});

$("#somethingElse").on("click", function(e){
 e.preventDefault(); // works as intended
 $("[templateID]").css("display", "block"); // this works ~ shows all buttons
}); 

问题是什么？当我隐藏按钮时，它会使其他 2 列向右移动，因为第 3 列不再占用那么多空间。当您使用整个 TR 并想要显示某些内容时，我希望能够产生与内联 block 或表行相同的结果，但要使用表 CELL/该单元格的内部内容来隐藏它。是否有诸如 inner-none 或 table-row-none 之类的东西？我找不到任何有用的东西。我不想删除该列。按钮被隐藏的唯一原因是，当单击按钮时，它所在的容器(表)会淡出，我隐藏了按钮，因此无法快速双击 - 如果按钮保持可见，我我发现你可以非常快速地点击(这很难，但会导致错误)并且由于使用了 fadeToggle() 而弄乱了淡入淡出动画。

无论如何，如果有人知道我如何隐藏表格单元格内容(对于整列)而不移动表格的其余部分(对第 3 列中的任何内容都没有响应)，那就太好了。谢谢 :)

Answer 1

要在隐藏元素时保留空间，您可以使用 visibility: hidden 或 opacity:0 并使其再次可见 visibility:visible 或 opacity:1

 $("#something").on("click", function(e){
     e.preventDefault(); // works as intended
     var aID = $(this).attr("templateID"); // works as intended
     $("[templateID]").css("visibility", "hidden"); // this works ~ hides all buttons
     // more stuff below... 
    });

$("#somethingElse").on("click", function(e){
 e.preventDefault(); // works as intended
 $("[templateID]").css("visibility", "visible"); // this works ~ shows all buttons
});