Скрытие / показ строки в таблице по checkbox

<div class="table-responsive ">
<table cellpadding="0" cellspacing="1" border="1" id ="value" class="table table-hover table-bordered" width="100%">
      <tbody>
        <tr>
        {foreach $data.header as $header}
          <th class="success"{if isset($header.rows)} rowspan='{$header.rows}'{/if}{if isset($header.cols)} colspan='{$header.cols}'{/if}>{$header.name}</th>
          {if !isset($hasChild) || isset($header.children)}
            {assign var="hasChild" value=true}
          {/if}
        {/foreach}
        </tr>
      {if isset($hasChild)}
        <tr>
        {foreach $data.header as $header}
          {if isset($header.children)}
            {foreach $header.children as $child}
              <th>{$child.name}</th>
            {/foreach}
          {/if}
        {/foreach}
        </tr>
      {/if}
        {foreach $data.data.values as $row}
          <tr id="hide">
          {foreach $row as $value}
            <td  class="warning">{if empty($value)}
                <script>
                    var table = document.getElementById("hide");
                    var row = table.rows['value'];
                    row.setAttribute("visible","false");
                </script>
                {else}{$value}{/if}
            </td>
          {/foreach}
          </tr>
        {/foreach} 
        <tr class="info">
      {if !empty($data.data.footer)}
        {foreach $data.data.footer as $row}          
          <td><b>{if empty($row)}&nbsp;{else}{$row}{/if}</b></td>
        {/foreach}
      {/if}
        </tr>
      </tbody>
    </table>
</div>