CODEWITHSUNDEEP
javascriptjqueryhtml
Wang'l Pakhrin
Wang'l Pakhrin

Reputation: 868

how to get the value of tr of a table using jquery on click

I have an example table

<table class="table">
  <tr value="1" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
 <tr value="2" class="side-link">
    <td>one</td>
    <td>two</td>
  </tr>
</table>

I want to get the value of the selected tr on click function. what I've tried so far 

$(".table").on('click','.side-link',function(e){
    e.preventDefault();
    var id = $(this).attr('value');
    alert(id);
});

the problem is I cannot address this to the respective "tr" I click , instead it gets the value of .table. Can anyone solve the issue here? I would be really grateful! THanks :)

Note: it needs ( on click ) because I've to replace tr using ajax and the new elements wont be recognized by just using click function !!

Jquery version 1.9.1

Upvotes: 5

Views: 43534

Answers (5)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Your code also working see Demo, check that you have included jquery version >= 1.7 or try to write your code in $(function(){...}) it may run before your table renders

You can also try it like,

$(function(){
    $(".table .side-link").on('click',function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});

Demo

Also if it is id then why you used value use id="1" and so on..

Updated if above not works then try this which never fails(IMHO) if your html is valid,

$(function(){
    $(document).on('click',".table .side-link",function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});

Upvotes: 0

Nono
Nono

Reputation: 7302

Okay, look this for get Tr value or Td value:

HTML Code:

<table class="table" border='1'>
    <tr value="1" class="side-link">
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr value="2" class="side-link">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

jQuery Code:

$(".table").on('click', 'tr', function () {
    var trValue = $(this).attr('value');
    var tdValue = $(this).children('td').map(function (index, val) {
            return $(this).text();
        }).toArray();
        // all td value with comma seprated
    alert(tdValue);
    // current tr attr value
    alert(trValue);
});

Live Demo (JsFiddle)

Upvotes: 0

bipen
bipen

Reputation: 36531

well use HTML5 data attribute.. this is the exact reason, why data attribute was introduce in HTML5. And make sure you are using jquery's latest version (> 1.6) .on was introduced only after jquery 1.6

HTML

 <table class="table">
   <tr data-value="1" class="side-link">
     <td>one</td>
     <td>two</td>
   </tr>
 <tr data-value="2" class="side-link">
    <td>one</td>
    <td>two</td>
 </tr>
</table>

jQuery

$(".table").on('click','.side-link',function(e){
  e.preventDefault();
  var id = $(this).data('value');
  alert(id);
});

Upvotes: 0

Praveen
Praveen

Reputation: 56501

$(".table").on('click','tr',function(e){
    e.preventDefault();
    var id = $(this).attr('value');
    alert(id);
});

JSFiddle

Upvotes: 14

Pat Dobson
Pat Dobson

Reputation: 3299

You're (as you say) getting the value of the table, not the TR

Amend your code like this:

$(".table tr").on('click','.side-link',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});

That should get the correct value.

Upvotes: 0

Related Questions