Friday, October 09, 2009

Collapsing HTML table using jQuery

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(

  function()

  {

    jQuery("[id*=testTable] tr:gt(1)").hide();

  }

);

 

function collapseDetails()

{

  jQuery("#testTable tr:gt(1)").toggle() ;

}

</script>

</head>

<body>

  <div id="wholeBody">

    <table id="testTable">

      <tbody>

        <tr>

          <td>

            col1

          </td>

          <td>

            col2

          </td>

        </tr>

       

        <tr>

          <td>

            col1

          </td>

          <td>

            col2

          </td>

        </tr>

       

        <tr>

          <td>

            col1

          </td>

          <td>

            col2

          </td>

        </tr>

       

      </tbody>

    </table>

    <div id="showAll" onclick="collapseDetails();">Show/Hide</div>

  </div>

</body>

</html>

No comments: