CODEWITHSUNDEEP
jqueryhtml-table
pri_dev
pri_dev

Reputation: 11665

Changing table row height and adding more data in the row

I need to have a html table where I click on one of the values in any row, then that entire row should expand (up or down with slide animation would be nice) and I need to insert a chart inside the row.

How should I do this using jQuery, also I would probably need to have the chart in a separate file and include the file in the dive in the row or some better container for the chart?

Upvotes: 0

Views: 575

Answers (1)

lucuma
lucuma

Reputation: 18339

There are a lot of ways to do this. My example uses a button but you could put the click event on anything.

http://jsfiddle.net/lucuma/Y4nC8/2/

Here is an example

<table>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
</table>​

js:

$(document).ready(function() {
  $('button').click(function() {
    var $newstuff = $('<div>my data<br />more data <br /> ok good</div>');
    $newstuff.appendTo($(this).closest('tr').find('td:eq(0)')).slideDown();

  });    
});

​

Upvotes: 1

Related Questions