Question

193

Toggle hide/show < tr> using jQuery

rated 0 times [ 196] [ 3] / answers: 1 / hits: 65936 / 10 Years ago, thu, march 6, 2014, 12:00:00

I have this code to show <tr> in my table but with every click, it hides the textbox that must be shown when the button is clicked.

Below is my jQuery code to show the textbox:

$(function() {

   $('#btnAdd').click(function() {

       $('.td1').show();

   });

});

And this is my code in <table>:

<button id=btnAdd name=btnAdd onclick=toggle(); class=span1>ADD</button>

<tr class=td1 id=td1 style=>  

     <td><input type=text name=val1 id=val1/></td>

     <td><input type=text name=val2 id=val2/></td>

</tr>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

randall

Add To Favorites

Follow

Total Points: 492

Total Questions: 99

Total Answers: 103

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

answered 10 Years ago deonkalvinw · Accepted Answer

You have invalid markup. You need to wrap tr in table.something like this:

<button id=btnAdd name=btnAdd class=span1 >ADD</button>

<table class=td1 style=display: block; >

<tr id=td1 >  

 <td><input type=text name=val1 id=val1/></td>

 <td><input type=text name=val2 id=val2/></td>

</tr>

</table>

And js would be:

$('#btnAdd').on('click', function (e) {

    e.preventDefault();

    var elem = $(this).next('.td1')

    elem.toggle('slow');

});

Working Demo