0

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

Kessi
  • 79
  • 1
  • 4
  • 10

6 Answers6

1

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();
  });
});
donk
  • 1,540
  • 4
  • 23
  • 46
1

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.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • But check browser compatibility: http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – Tim Croydon Oct 29 '12 at 14:34
  • 1
    @TimCroydon No need. You don't need a browser that supports HTML5 `data-` attributes to use them in jQuery with `.data()`. – Blazemonger Oct 29 '12 at 14:35
  • @Blazemonger Thanks man, this is what I exactly wanna to accomplish. Neat way to do it like this! Thanks! – Kessi Oct 29 '12 at 14:50
0

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
  });
});
Tim Croydon
  • 1,866
  • 1
  • 19
  • 30
0

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>&nbsp;</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');
    });
});    
​
Tomer
  • 17,787
  • 15
  • 78
  • 137
  • You can do it without any hidden variables. You can do it using same id if you want. $(this) will do the trick. Or if you want, you can use same class name, it goes with the same idea like id – kidz Oct 29 '12 at 14:34
0

try this,i have updated the fidle:

working 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.

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
-1
$(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>
kidz
  • 308
  • 1
  • 8
  • You can't use the same id twice. – Tomer Oct 29 '12 at 14:38
  • @ftom2, How many times have you used jQuery? Have you run what I wrote? My script is absolutely correct – kidz Oct 29 '12 at 14:40
  • First of all, the HTML spec defined that an id attribute should be unique, this means you can't use the same id for 2 different elements on the same page. secondly, this might work for a simple example but it will most probably will cause problems once you start doing a more complex page. And i've been using jquery for at least 3 years, thanks for asking... – Tomer Oct 29 '12 at 14:44
  • I used id, cause the example is with id. And the trick is with $(this). So, whatever row is clicked on with that id, will fire the event. It's not the matter of HTML only. I am using same technique for class and id vice versa without any problem for last 3 years – kidz Oct 29 '12 at 14:47
  • So you are doing it wrong. `id`, by definition is unique and i have seen cases where id wasn't unique and it caused problems. That is what classes are for. – Tomer Oct 30 '12 at 08:07
  • give me an example where id is causing problem, i will fix it for you free – kidz Oct 30 '12 at 14:04
  • dude, get over it, if you don't believe me, look here: http://www.w3schools.com/tags/att_global_id.asp. just google for 'html unique id', this has been discussed many times. – Tomer Oct 30 '12 at 14:10
  • w3schools, the shittiest site available for HTML, I said I can make it workable. Nothing to believe or disbelieve, gimme the example plz – kidz Oct 30 '12 at 14:18