Getting undefined as the value for span tag while traversing a table

Question

I need to reach the the span tag with class = ustatus and have the jQuery object obtained for id = foo.

<tr>
  <td> <input name = 'user' type='radio 'id='foo'/> </td>
  <td> <input id='boo'/> </td>
  <td> <input id='too'/> </td>
  <td> <input id='yoo'/> </td>
  <td> <span class='ustatus'> Active </span> </td>
</tr>

I was trying like:

$("input[name = 'user']:checked").closest('td').find('.ustatus').first().val()

but get undefined as the value. Where did I make a mistake?

Anoop Joshi P · Answer 1 · 2015-09-23T08:27:02.713

2

You need to use

$("input[name = 'user']:checked").closest('tr').find('.ustatus:first').text()

Because,ustatus is the sibling of your parenent td. So you need to traverse to the parent tr first. Then you can use the find() method, which will search for the child elements

edited Sep 23 '15 at 08:27

answered Sep 23 '15 at 08:16

Anoop Joshi P

25,373
8
32
53

What difference does it make? Could you elaborate. – Suhail Gupta Sep 23 '15 at 08:21
I already explained it in the answer. Your ustatus is not the child of current parent td. – Anoop Joshi P Sep 23 '15 at 08:23

Milind Anantwar · Accepted Answer · 2015-09-23T08:22:54.347

2

Few Issues in your code:

1) You need to traverse to tr instead of td. as span lies in one of the sibling td of selected radio buttons parent td

2) span element have text/html property associated to it and not value.you need to use .text()/.html() instead of .val()

3) as there is only one ustatus element in tr, you do not need .first() selector.

$("input[name='user']:checked").closest('tr').find('.ustatus').text()

edited Sep 23 '15 at 08:22

answered Sep 23 '15 at 08:17

Milind Anantwar

81,290
25
94
125

Why can't I reach `span` from `td`? Why do I need to reach `tr` first and then travel to span? – Suhail Gupta Sep 23 '15 at 08:29
@SuhailGupta `as span lies in one of the sibling td of selected radio buttons parent td` – Milind Anantwar Sep 23 '15 at 08:29

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

span has no value you need to use text() or html()

var text = $("input[name = 'user']:checked").parent().parent().find('.ustatus').text();

or

var html = $("input[name = 'user']:checked").parent().parent().find('.ustatus').html() ;

DEMO

Because your anchor is the input you need to go 2 level up to tr where you can find the td that has the class .ustatus so you need to add 2 parent()

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 23 '15 at 08:23

guradio

15,524
4
36
57

score 0 · Answer 4 · edited Sep 23 '15 at 08:42

You are targetting the cell and then trying to find ".ustatus" class of first order to take the html content/value, using val()

$("input[name = 'user']:checked").closest('td').find('.ustatus').first().val()

val() is used to get values of form fields. Use either text() or html() to get plain text content or including tags respectively.

$("input[name ='user']:checked").closest('tr').find('.ustatus:first').text()

would work as we are finding .ustatus:first in row and taking the content using text().

Getting undefined as the value for span tag while traversing a table

4 Answers4