I want to show the data of an row when the row is clicked upon. I manage to this with jQuery, but I am not sure how to make this more generic. Now I have given the first row an id and the target also an id, but how can you make this generic for every row without using an different id for each row?
$(document).ready(function () {
$('#d01').click(function() {
$('#c01').css('display', 'block');
});
});
My fiddle.
Hope that I am clear....
Regards, Kenneth
Assing a class to every row and handle the click event for that class. Assing the id 'd01' for the row, and assing 'd01_data' for the table you want to show, and assing a class 'row' for the element that is clickable.
$(document).ready(function () {
$('.row').click(function() {
var table_id = '#'+$(this).attr('id')+'_data';
$(table_id).show();
});
});
I would assign the unique ID of the aside you wish to show as a hidden data- attribute on each clickable row:
<tr data-details="c01" class="customer">
...
<table id="c01" class="aside hidden">
Then, you can extract this using .data('details') and show only that table:
$(document).ready(function () {
$('tr.customer').click(function() {
var id = $(this).data('details');
$('table.hidden').hide();
$('#'+id).show();
});
});
http://jsfiddle.net/mblase75/7x3CZ/
I prefer this approach because it lets you separate the HTML from the JavaScript as much as possible, and gives you the flexibility to assign IDs however you like.
You can use a CSS class in your selector rather than IDs.
E.g.
...
<tr class="myClassToIndicateIWantThisClickable">...</tr>
...
and then in your JS use:
$(document).ready(function () {
$('.myClassToIndicateIWantThisClickable').click(function() {
// do my stuff here
});
});
When you want to put the same event on many elements, you use a class instead of an ID.
So give every <tr> a class (for example class="clickable"), and then bind a click event using this class. Once the element is clicked you can use the this keyword for getting the specific object data.
See this fiddle.
HTML:
<table>
<thead>
<tr class="grey">
<th width="140px">Achternaam</th>
<th width="80px">Initialen</th>
<th width="80px">Tussenv.</th>
<th width="80px">Geslacht</th>
<th width="100px">Geb.dat.</th>
</tr>
</thead>
<tbody>
<tr id="d01" class="customer clickable">
<td>Pietersen</td>
<td>M.</td>
<td>Van</td>
<td>Male</td>
<td>18-07-1956</td>
</tr>
<tr class="customer grey clickable">
<td>Janssen</td>
<td>A.</td>
<td> </td>
<td>Female</td>
<td>16-12-1972</td>
</tr>
<tr class="customer clickable">
<td>Puk</td>
<td>P.L.</td>
<td>Van der</td>
<td>Female</td>
<td>16-07-1965</td>
</tr>
</tbody>
</table>
<br /><br />
<table id="c01" class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
<table class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
<table class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
$('.clickable').click(function() {
var $this = $(this);
$this.find('td').each(function(){
//inside the each loop, the 'this' keyword refers to the current <td>
alert($(this).text());
});
$('#c01').css('display', 'block');
});
});
try this,i have updated the fidle:
i have given
id=c01
to
id=c03
for different table.and also added one customfield in table that have id of table that need to displayed.
on every tr click your table will be displayed.
$(document).ready(function () {
$('#anyid').click(function() {
$(this).css('display', 'block');
});
});
<tr id="anyid">
<td>hello</td>
<td>world</td>
</tr>
<tr id="anyid">
<td>hello1</td>
<td>world1</td>
</tr>
