Refactor link to show/hide a table row

I have a table with row which cab be hidden by user. It's implemented this way:

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>

And jQuery code:

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

H开发者_如何学Cow to implement the same behavior with one, single link and one, probably, CSS class?

My idea - store somewhere a boolean variable and toggle controls visibility relatively to this variable. Are there more?

Is the row hiding not working properly on IE? What is the version of jQuery and the browser which is troublesome?

I created an example using toggle as suggested by @Galen and it works on Chrome, Firefox, and Safari. I don't have access to IE.

Here's the code:

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

Use a toggle as mentioned in the above post but use a "tbody" instead of a "tr" so that rows can be hidden/shown as required.

You can use jquery's toggle to alternate between hiding and showing of objects with one link. You wont need to store any variables.