jQuery toggle tr in table
Question
Trying to toggle some tr's in my table when clicking on a tr. I have written code, but it doesn't seem to work.
It's originally written in php, but my php code is pretty confsing so I thought just capturing the output would help organize things.
So for example of what I want to happen is when I click folder1, I need folderContent1 to display.
The jQuery for some reason doesn't work for this.
Is it something wrong with the jQuery or must I display my php code?
EDIT .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Protected Page</title>
<script type="text/Javascript" src="js/jQuery-1.7.js"></script>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<p>Welcome joshbarber89!</p>
<p>
<table>
<tr>
<td>Admin Tools:</td>
</tr>
<tr>
<td>Register a user <a href='register.php'>here</a></td>
</tr>
<tr>
<td>Edit/Delete user <a href='editList.php'>here</a></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Create new folder <a href='createFolder.php'>here</a></td>
</tr>
<tr>
<td>Add <a href='add_content.php'>content</a></td>
</tr>
</table>
<p> Content: </p>
<table id='content'>
<tr>
<td width='50'></td><td>Folder Name</td><td>Tools</td><tr id='folder1'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>a</td></td><td><a href='edit_folder.php?id=1'>Edit</a> <a href='delete_folder.php?id=1'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>a</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=24'>Edit</a> <a href='delete_content.php?id=24'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>stuff in a</td><td width = '100'><a href=uploads/Interprovincial%20-%20Territorial%20Protocol%20%5B02-Apr-2002%5D.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=25'>Edit</a> <a href='delete_content.php?id=25'>Remove</a></td></tr><tr id='folder2'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>blah</td></td><td><a href='edit_folder.php?id=2'>Edit</a> <a href='delete_folder.php?id=2'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>stuff</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=22'>Edit</a> <a href='delete_content.php?id=22'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>asdasdasd</td><td width = '100'><a href=uploads/sbcon_admin.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=23'>Edit</a> <a href='delete_content.php?id=23'>Remove</a></td></tr></table>
<script>
$(document).ready(function(){
var count = $('#content tr').length;
for(var i = 0; i< count; i++)
{
$('.folderContent'+i).hide();
$('#folder'+i).click(function(){
$('.folderContent'+i).toggle();
});
}
});
</script>
<p>If you are done, please <a href="includes/logout.php">log out</a>.</p>
</p>
<p>Return to <a href="login.php">login page</a></p>
</body>
</html>
No errors in console
5 answers
solution1
2 ACCPTED 2014-08-26 13:31:34
You're running into one of the common gotcha's with closures. By the time the click handler is called i = count, so all buttons click handlers will toggle the last element.
You can fix this by wrapping the body of the loop in an immediately invoked function.
for(var i = 0; i < count; i++) {
(function(i) {
$('.folderContent'+i).hide();
$('#folder'+i).click(function() {
$('.folderContent'+i).show();
});
})(i);
}
solution2
1 2014-08-26 13:33:00
What I like to do in these cases is debug every step put alert or console.log in your js to check if it runs at all.
$(document).ready(function(){
var count = $('#content tr').length;
for(var i = 0; i< count; i++)
{
console.log('inside loop ' + i);
$('.folderContent'+i).hide();
$('#folder'+i).click(function(){
console.log('clicked on row');
console.log(this);
$('.folderContent'+i).toggle();
});
}
});
Also, I would not put i inside the click function. Better get the id from the element you clicked on.
UPDATE
Thad suggested best way of getting Id. Create your tr as follows
> <tr id='folder1' data-child-id='1'></tr>
And update on click event.
$('#folder'+i).click(function(){
var childId = $(this).data('child-id');
$('.folderContent'+ childId ).toggle();
});
solution3
1 2014-08-26 13:33:28
There are many ways to do this but I'll show you a quick example of how I'd go about it, assuming you can have a variable number of children.
Here's a jsfiddle: http://jsfiddle.net/cpsmLayL/
Using data attributes we can add custom data pairing one parent to many children, and toggle based on that. For each parent tr we add data-show-child="{parentnumber}" and then for each child of that parent we add the class child-{parentnumber} .
I know the example is a little sloppy but it gives you a general idea.
Here's another example using tbody's to wrap parents and children. I think I prefer it.
solution4
0 2014-08-26 13:38:19
An alternative solution could be to use personal attributes like this
<table>
<tr data-id="1" ... ></tr>
<tr data-parent-id="1" ... ></tr>
<tr data-parent-id="1" ... ></tr>
<tr data-id="2" ... ></tr>
<tr data-parent-id="2" ... ></tr>
<tr data-parent-id="2" ... ></tr>
</table>
<script type="text/javascript">
$('tr[data-id]').click(function(){
var id = $(this).attr('data-id');
$('tr[data-parent-id="'+id+'"]').toggle();
});
</script>
I guess this is more clean and fast
solution5
-1 2014-08-26 13:33:44
A better approach which works as expected using an attribute to point out the index of the contents:
HTML:
<table id='content'>
<tbody>
<tr class="folder" index="1">
<td>folder1</td>
</tr>
<tr class="folderContent1">
<td>content</td>
</tr>
<tr class="folderContent1">
<td>content</td>
</tr>
<tr class="folder" index="2">
<td>folder2</td>
</tr>
<tr class="folderContent2">
<td>content</td>
</tr>
<tr class="folderContent2">
<td>content</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var count = $('#content tr').length;
for (var i = 0; i < count; i++) {
$('.folderContent' + i).hide();
}
$('.folder').click(function () {
$('.folderContent' + $(this).attr("index")).toggle();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.