STUCK WITH TABLE EXPANDABLE
Hello,
I am very new at jquerry and I am trying to make things work, but it doesn't. I took an example of expandable tables at
http://www.packtpub.com/article/jquery-table-manipulation-part2
and I am trying to use the following code:
-
$(document).ready(function() {
var toggleMinus = '../icons/minus.png';
var togglePlus = '../icons/plus.png';
var $subHead = $('tbody th:first-child');
$subHead.prepend('<img src="' + toggleMinus + '"
alt="collapse this section" />');
$('img', $subHead).addClass('clickable')
.click(function() {
var toggleSrc = $(this).attr('src');
if ( toggleSrc == toggleMinus ) {
$(this).attr('src', togglePlus)
.parents('tr').siblings().fadeOut('fast');
} else{
$(this).attr('src', toggleMinus)
.parents('tr').siblings().fadeIn('fast');
};
});
And hereafter my test file:
-
<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 src="expand.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<table class="striped">
<thead>
<tr>
<th>Date</th>
<th>Headline</th>
<th>Author</th>
<th class="filter-column">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">2007</th>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jQuery Meetup</td>
<td>John Resig</td>
<td>conference</td>
</tr>
<tr>
<td>Feb 28</td>
<td>jQuery 1.1.2</td>
<td>John Resig</td>
<td>release</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2006</th>
</tr>
<tr>
<td>Dec 27</td>
<td>The Path to 1.1</td>
<td>John Resig</td>
<td>source</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I imported both jquery library and expand.js, what else shall I do for it to work??
Thanks