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

我有一张带驾驶室的桌子,用户可以把它藏起来。它是这样实现的:

Markup:

<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类实现相同的行为?

我的想法-将一个布尔变量存储在某个地方,并切换控件相对于该变量的可见性。还有吗?