jQuery toggle table row on click on a specific td

Question

So, i have a table with some hidden rows with class="mov" that I would like to toggle when you click on a specific td with id="line" or class="line" .

<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9"> 
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>

<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center">&nbsp;</td>
</tr>
</table>

And here's the jQuery function:

$(function() {
    $('tr.sinaledit').click(function(){
            $(this).siblings('.mov'+this.id).toggle('slow');
        });
    $('tr[class^=mov]').hide().children('td');
});

It works, but it toggles the rows when you click on any td, even the x one. The x td will have another delete function associated with it, that's why I don't want it do be part of the toggle. But I can't manage to make the toggle when you click only on id="line" . Sorry, I'm a jQuery beginner.

Here's a fiddle for demo:

jsFiddle

Thank you very much!

Answer 1

you have simply to attach the click event on the required element.In your case the element has the id line so you have to use the # selector to select this element:

 $(function() { $('#line').click(function(){ $('tr.sinaledit').siblings('.mov').toggle('slow'); }); $('tr[class^=mov]').hide().children('td'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table align="center" id="editabletable" class="table" cellpadding="5" cellspacing="3" border="1"> <tr class="sinaledit"> <td align="center" id="line" class="line" colspan="9"> <table><tr><td id="+" align="center"> + </td> <td align="center">text</td> <td align="center" >text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> </tr></table></td> <td align="center" id="x" class="x">x</td> <tr class="mov"> <td align="center">Card</td> <td align="center">Type</td> <td align="center">Code</td> <td align="center">Desc</td> <td align="center">P1</td> <td align="center">P2</td> <td align="center">P3</td> <td align="center">P4</td> <td align="center">P5</td> <td align="center">&nbsp;</td> </tr> <tr class="mov"> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">&nbsp;</td> </tr> </table> 

Answer 2

It's really just a matter of how you use your selectors. I chose to only apply the click event on anything with the '.line' class instead.

Made some changes but see the jsFiddle

$(function() {
    $('.line').on('click', function(){
        // Find the nearest element with .line class
        // Once found, move up to the parent <tr> to find siblings
        // Note: this only works with your current structure
        $(this).closest('.line').parent().siblings('.mov').toggle();
    });

    $('tr[class^=mov]').hide().children('td');
});

Answer 3

For the html structure I like more this

<style>
.mov {
    display: none;
}
</style>
<table align="center" id="editabletable">
<tr>
    <td id="add">+</td>
    <td id="remove">x</td>
</tr>
<tr>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
</tr>

<tr class="mov">
    <td align="center">Card</td>
    <td align="center">Type</td>
    <td align="center">Code</td>
    <td align="center">Desc</td>
    <td align="center">P1</td>
    <td align="center">P2</td>
    <td align="center">P3</td>
    <td align="center">P4</td>
    <td align="center">P5</td>
    <td align="center">&nbsp;</td>
</tr>
</table>

For the jquery part, this is more simple:

$(function() {
 $('#add').click(function(){
         $('.mov').show('slow');
     });
 $('#remove').click(function(){
    $('.mov').hide('slow');
 });
});

Answer 4

Try,

$(function() {
    $('.sinaledit').click(function(){
            $('.mov').toggle('slow');
        });
    $('tr[class^=mov]').hide().children('td');
});

This will help fixing your need.

Answer 5

jsFiddle

You cannot sibling <tr> and <td> , TD should always be child of TR .
It's good to avoid "+" as ID name selector.
If you plan to have multiple buttons - simply remove all of your ID and rely on CLASSes.

Here's an example with even multiple tables:

 $(function() { $('.table').on("click", ".line", function(){ $(this).siblings('.mov').toggle(800); }).on("click", ".delete", function(){ $(this).closest("table").fadeOut(function(){ $(this)/*the table*/.remove(); }); }); }); 

 .line:hover { background-color:#cf5; cursor: pointer; } .table { margin: 0 auto; width:100%; border-collapse: collapse; table-layout:fixed; } .table td, .table th{ padding:5px 10px; border:1px solid #444; } .table tr.mov{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <tr class="line"> <td class="show">+</td> <td>1 text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td class="delete">x</td> </tr> <tr class="mov"> <td>&nbsp;</td> <td>Card</td> <td>Type</td> <td>Code</td> <td>Desc</td> <td>P1</td> <td>P2</td> <td>P3</td> <td>P4</td> <td>P5</td> <td>&nbsp;</td> </tr> <tr class="mov"> <td>&nbsp;</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>&nbsp;</td> </tr> </table> <table class="table"> <tr class="line"> <td class="show">+</td> <td>2 text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td class="delete">x</td> </tr> <tr class="mov"> <td>&nbsp;</td> <td>Card</td> <td>Type</td> <td>Code</td> <td>Desc</td> <td>P1</td> <td>P2</td> <td>P3</td> <td>P4</td> <td>P5</td> <td>&nbsp;</td> </tr> <tr class="mov"> <td>&nbsp;</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>&nbsp;</td> </tr> </table> 

Answer 6

There is no </tr> tag corresponding to the <tr class="sinaledit"> tag so the browser is applying the behavior to all td tags. Try the following:

<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9"> 
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td></tr>
<tr><td align="center" id="x" class="x">x</td></tr>

<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center">&nbsp;</td>
</tr>
</table>

There are other style edits I would make to make the html easier to follow, but the above is the bare minimum you need to get the desired functionality.

updated jsfiddle