Modifying a row toggle script?

happybanana · 01-26-2013, 04:36 AM

Hi,

I'm using the following javascript to perform a row toggle effect, which is working fine

$(document).ready(function() {

      \$('table.detail').each(function() {

        var \$table = \$(this);

        \$table.find('.parent').click(function() {

            $(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method

        });



        var \$childRows = \$table.find('tbody tr').not('.parent').hide();

        \$table.find('button.hide').click(function() {

            \$childRows.hide();

        });

        \$table.find('button.show').click(function() {

            \$childRows.show();

        });

    });

});

The issue is that I would like only certain cells of the html row that I click on to hide/show the row below. So say cells 1 - 3 will expand it but cells 4 - 8 will not expand it. I've been searching on how to do this but haven't had much luck and my javascript knowledge is terrible!

I'd also like to include an 'arrow' feature that changes when cell is clicked to show that it can be expanded or contracted in one cell. I could probably do that myself at a stretch but if anyone has a quick insight into a way they'd recommend I'd appreciate it. I have found the following HTML code (&#x25B6) that will help but not sure if I should be using .gifs etc

The HTML table for working with the javascript above uses this format to activate it.

<table class=\"detail\">
<tr class=\"parent\"><td>my parent</td>
<tr class="child"><td>my child</td>

sunfighter · 01-28-2013, 05:52 PM

happybanana please use the hash mark = # and not the #i to show your code. It doesn't hurt here, but it could in the future.

Why all the single slashes? ex: var \$table = \$(this);

happybanana · 01-29-2013, 07:40 AM

Apologies sunfigther, I'll re-edit.

The \'s are because I'm using PHP to present the javascript. PHP would interpret these as PHP variables until I escaped them.

The code works fine if I want to click on any cell of a parent row, whereas I just want to be able to click on particular cells in the parent row and not the entire row.

{note: hmm can't seem to re-edit the original post!}

sunfighter · 01-29-2013, 05:55 PM

In your post you should see in the bottom right a black button with EDIT in it. That should do it for you.

I don't know why your using PHP to write out the page or the javascript, but look into heredoc in PHP.

Fast table with the first and last <td> show/hiding the middle row.

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>
</head>
<body>

<table border="1">
<tr>
	<td onclick="toggle();">Always visible</td>
	<td>Always visible</td>
	<td>Always visible</td>
</tr>

<tr id="hidethis">
	<td>Hide this</td>
	<td>Hide this</td>
	<td>Hide this</td>
</tr>

<tr>
	<td>Always visible</td>
	<td>Always visible</td>
	<td onclick="toggle();">Always visible</td>
</tr>

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