How to get a tr value with JQuery

Question

I'm doing this example to return a tr value in Jquery but it dosen't work this the example.

 $(document).ready(function(){
  var i = 1;
  $("tr").click(function(e){
      e.preventDefault();
      var num = $(this).attr('value');
      if(i == 1)
      {
        $(".informations"+num).show('slow');
        i = 0;
      }
      else
      {
        $(".informations"+num).hide('slow');
        i = 1;
      }
      console.log(num);
    });

});

HTML

<tr class="informations1 informations" value="1">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

Any idea why ? Thanks

`tr` does not support a value attribute. What are you trying to do? — Evan Knowles, Jul 16 '14 at 09:43
instead of using value, can you use custom data-attribute? like `data-value` — Se0ng11, Jul 16 '14 at 09:43

score 1 · Answer 1 · answered Jul 16 '14 at 09:44

1

As TR doesn't have value property. I would suggest you to use data-* custom attribute.

HTML

<tr class="informations1 informations" data-value="1">

Script, You can use .data() to manipulate it. It also take care of data-type.

var num = $(this).data('value');

answered Jul 16 '14 at 09:44

Satpal

132,252
13
159
168

@Satpal: but his is working . see here. he can get tr value. http://jsfiddle.net/Amit12x/yjTuM/ – Amit Kumar Jul 16 '14 at 09:46
1

@AmitKumar, Check http://jsfiddle.net/satpalsingh/j4kub/ I have just use `===` instead of `==` on strict checking it fails. Same fiddle http://jsfiddle.net/satpalsingh/jvz3y/ with `.data()` example – Satpal Jul 16 '14 at 09:50
@Satpal wath does it mean === ? – Karim Ennassiri Jul 16 '14 at 10:00
@KarimEnnassiri, The identity (===) operator behaves identically to the equality (==) operator except __no type conversion is done__, and the __types__ must be the same to be considered equal. Read [Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?](http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons) – Satpal Jul 16 '14 at 10:01

score 1 · Answer 2 · answered Jul 16 '14 at 09:45

1

use .toggle() in jquery

$("tr").click(function(e){

      e.preventDefault();
      var num = $(this).data('value');
      $(".informations"+num).toggle('slow');

    });

answered Jul 16 '14 at 09:45

Sudharsan S

15,336
3
31
49

techfoobar · Answer 3 · 2014-07-16T10:34:27.203

0

tr shouldn't have a value attribute. Use data-value="1" in HTML and $(this).data('value'); in code.

HTML

<tr class="informations1 informations" data-value="1">

JavaScript

...
var num = $(this).data('value');
...

edited Jul 16 '14 at 10:34

answered Jul 16 '14 at 09:43

techfoobar

65,616
14
114
135

score 0 · Answer 4 · answered Jul 16 '14 at 09:45

0

Value isn't Attribute W3C Recommendation for tr tag. Use data-attributes.

$("tr").click(function(e){
    // ...
    console.log($(this).attr('data-value'));
    // ...
});

answered Jul 16 '14 at 09:45

user2226755

12,494
5
50
73

score 0 · Answer 5 · answered Jul 16 '14 at 09:52

If your table does not have a <table> wrapper, that could be your issue. See this fiddle http://jsfiddle.net/wJ3CK/. My guess is that you have invalid markup, so the text is being inserted into the DOM without structure (then your binds will be invalid).

How to get a tr value with JQuery

5 Answers5