Other function

Other function

Still trying to understand how to make tables expandable like a jtree.

I found a good example on http://www.javascripttoolbox.com/jquery/#expandablerows

<script src="scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
   $('tr.parent')
      .css("cursor","pointer")
      .attr("title","Click to expand/collapse")
      .click(function(){
         $(this).siblings('.child-'+this.id).toggle();
      });
   $('tr[@class^=child-]').hide().children('td');
});
</script>



Here the explanation given to make it work:
The only requirements are:

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to

I did this:

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="css_table.css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
   $('tr.parent')
      .css("cursor","pointer")
      .attr("title","Click to expand/collapse")
      .click(function(){
         $(this).siblings('.child-'+this.id).toggle();
      });
   $('tr[@class^=child-]').hide().children('td');
});
</script>


</head>
<body>

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Headline</th>
      <th>Author</th>
    </tr>
  </thead>

    <tr class="parent" id="p">
      <th colspan="4">2007</th>
    </tr>

    <tr class="child-p1">
      <td>Mar 11</td>
      <td>SXSWi jQuery Meetup</td>
      <td>John Resig</td>
      <td>conference</td>
    </tr>

    <tr class="parent" id="p2">
      <th colspan="4">2006</th>
    </tr>

    <tr class="p2">
      <td>Dec 27</td>
      <td>The Path to 1.1</td>
      <td>John Resig</td>
      <td>source</td>
    </tr>

</table>
</body>
</html>


I don't understand why it doesn't work? Coudl you please tell me what is wrong?
Thanks