How to change value of a particular TD in a row with JQuery or Javascript?

Question

So if I have table:

<table id="someTable">
  <tr><td>Key1</td><td>Value1</td></tr>
  <tr><td>Key2</td><td>Value2</td></tr>
  <tr><td>Key3</td><td>Value3</td></tr>
</table>

Is there a way I can get the "index of the row" of value 2 and store the value "Key2" into a variable. Then using that "index of the row containing value2", I change the "first TD"(or if there were three TD's, get the 3rd TD) of that row to something like "changed key"?

Something like "index of tr" and then specifying "index of td" to change... not sure if that is possible with jquery or javascript.

Martijn Pieters · Accepted Answer · 2014-06-04 16:16:09Z

8

If you know the index of the row and cell, you could do something like this:

$(document).ready(function(){
    $('#someTable tr:nth-child(2) td:nth-child(1)').html('foo');
});

You can also pull the current value of the cell using the same selector, but .html() rather than .html(content)

Fiddle here

edited Jun 4, 2014 at 16:16

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Apr 28, 2011 at 22:44

Demian Brecht

21.4k5 gold badges45 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Shields · Accepted Answer · 2011-04-28 22:41:53Z

1

If you pass jQuery a td, you can get the index of it's containing row (relative to the other rows) with $(obj).parents("tr").index(); //obj is the td object passed in You can do the same to the table cell: $("#yourtable td").eq(index).text("Your Value"); //index is the index you wanna grab

answered Apr 28, 2011 at 22:41

Thomas Shields

8,9235 gold badges45 silver badges79 bronze badges

Comments

Edgar Villegas Alvarado · Accepted Answer · 2011-04-28 22:51:50Z

0

//First, obtain the td that contains 'Value2'
var $tdThatContainsValue2 = $("#someTable tr td").filter(function(){
    return $(this).html() == "Value 2";
});
//Then, obtain the first td in its row (it's first 'sibling');
$firstCellOfValue2row = $tdThatContainsValue2.siblings("td").eq(0);
alert($firstCellOfValue2row.html());  //Will show "Key 2"

Hope this helps

answered Apr 28, 2011 at 22:51

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to change value of a particular TD in a row with JQuery or Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related