CODEWITHSUNDEEP
javascriptjquery
Kar
Kar

Reputation: 321

Get the third property from selected row

Which is the best way to get a table row element? I have this grid, it is a dynamically added grid. Every td has the class='dxgv'

enter image description here

The first column is a selectable column, which contains the id of the row, but I need to know in the client side also the third property from the selected row. (Prejudicii, Penalitati....)

I thought that I can do something like this:

 var td = $(".dxgv").find("td:eq(3)").val();

and I will get the value, but it is not working.

I have tried the answers, but I could not resolve the problem. For example if I use 

 var ee = $('tr:has(input:checked) td:eq(3)').text();
 var td = $(".dxgv:eq(2)").text();
 console.log('Textbox value at row ' + i + ': ' + td);
 console.log('ee value at row ' + i + ': ' + ee);

I get this: enter image description here

Upvotes: 2

Views: 1212

Answers (4)

Delvian
Delvian

Reputation: 185

This is because jQuery's find() looks inside the element you have already selected. Hence, the code you have given looks for the fourth (the index of the first element is 0) td inside every .dxgv, which does not exist. Additionally, seeing as it is not an input element, you need the text inside rather than its value.

You are probably looking for something like this:

$('tr:has(input:checked) td:eq(2)').text();

This selects every tr that has a checked input inside of it, then selects the third td from it.

Do note that text() gets the text from every element that is matched and just combines them into a single String, so if you want to support the selection of multiple rows, you will need to use jQuery's forEach() function to add them to an Array one by one.

Upvotes: 1

Brainfeeder
Brainfeeder

Reputation: 2632

Unless you have some kind of input element, .val() will not work. You can use .html() or .text() instead:

var td = $(".dxgv").eq(2).text(); // note .eq(2), because the function is zero-based.

Upvotes: 1

ADyson
ADyson

Reputation: 62060

You're nearly right, but there are some small things wrong:

1) .find() gets elements which are children of the selection. Your tds are the selection, and have no children, so this will not locate anything. Instead you need to select the 3rd element directly from the collection

2) .val() gets values from form fields such as textboxes. To get the value from a non-form element such as a td, you need to use .text().

3) eq() uses zero-indexing, so to get the 3rd element you actually need to ask for element 2.

$(function() {
  var td = $(".dxgv:eq(2)").text();
  console.log(td);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="dxgv">1st</td>
    <td class="dxgv">2nd</td>
    <td class="dxgv">3rd</td>
    <td class="dxgv">4th</td>
    <td class="dxgv">5th</td>
  </tr>
</table>

Upvotes: 2

Terry
Terry

Reputation: 66218

Your JQuery logic is a little bit off, but almost there.

 var td = $(".dxgv").find("td:eq(3)").val();

The above snippet you are using tells the browser to look for the third <td> element inside an element with the class .dxgv. But based on the screenshot you've provided, the problem is apparent:

  • it is the <td> itself has the class
  • the cell is the third cell (index of 2, not 3)

So what you want is to use this selector:

var td = $(".dxgv").eq(2).text();

The changes:

  • Use .eq(2) to filter through the current selection, so that you get the third .dxgv element. Remember that JS uses a zero-based index (third element has index of 2)
  • Use .text() to access the textual content of the element

See proof-of-concept example:

$('button').on('click', function() {
  var td = $('.dxgv').eq(2).text();
  console.log(td);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		<tr>
			<td class="dxgv"><input type="checkbox" /></td>
			<td class="dxgv">24/04/2018</td>
			<td class="dxgv">Prejudicii</td>
		</tr>
	</tbody>
</table>

<button type="button">Click to get text from third cell</button>

Upvotes: 2

Related Questions