Question

我有一个带有行的表，用户可以隐藏它。它以这种方式实现：

标记：

<table>
   <tr>
      <td>
         <table style="margin-left: auto; text-align: right;">
            <tr>
               <td class="stats-hide">
                  <a href="#" onclick="hideStats();">Hide</a>
               </td>
               <td class="stats-show" style="display: none;">
                  <a href="#" onclick="showStats();">Show</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="stats-hide">
      <td>
        <!-- data -->
      </td>
   </tr>
</table>

和jQuery代码：

<script type="text/javascript" language="javascript">
    function hideStats() {
        hideControls(true, $('.stats-hide'));
        hideControls(false, $('.stats-show'));
    }

    function showStats() {
        hideControls(false, $('.stats-hide'));
        hideControls(true, $('.stats-show'));
    }

    function hideControls(value, arr) {
        $(arr).each(function () {
            if (value) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        });
 }
</script>

如何用一个单链接和一个CSS类实现相同的行为？

我的想法 - 在某处存储一个布尔变量并切换控制相对于此变量的可见性。还有更多吗？

Answer 1

使用上面帖子中提到的切换，但使用“tbody”而不是“tr”，以便可以根据需要隐藏/显示行。

Answer 2

该行隐藏在IE上无法正常工作吗？什么是jQuery和浏览器的版本很麻烦？

我根据@Galen的建议使用切换创建了example，它适用于Chrome，Firefox和Safari。我无法访问IE。

以下是代码：

HTML

<table>
   <tr>
      <td>
         <table class="data">
            <tr>
               <td class="stats-hide">
                  <a href="#" class="toggle-stats">Hide</a>
               </td>
               <td class="stats-show">
                  <a href="#" class="toggle-stats">Show</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="stats-hide">
      <td>
        Some Data
      </td>
   </tr>
</table>

的Javascript

$(".toggle-stats").click(function() {
    $(".stats-hide, .stats-show").toggle();
});

Answer 3

您可以使用jquery的toggle在隐藏和显示具有一个链接的对象之间进行切换。你不需要存储任何变量。

重构链接以显示/隐藏表格行

3 个答案:

HTML

的Javascript