CODEWITHSUNDEEP
jquerycss-selectors
abenci
abenci

Reputation: 8651

How to select and change value of table cell with jQuery?

How do I change the content of the cell containing the 'c' letter in the HTML sample using jQuery?

<table id="table_header">
<tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
</tr>
</table>

Thanks.

Upvotes: 33

Views: 122186

Answers (6)

PRTJ
PRTJ

Reputation: 1102

I wanted to change the column value in a specific row. Thanks to above answers and after some searching able to come up with below,

var dataTable = $("#yourtableid");
var rowNumber = 0;  
var columnNumber= 2;   
dataTable[0].rows[rowNumber].cells[columnNumber].innerHTML = 'New Content';

Upvotes: 3

user113716
user113716

Reputation: 322502

Using eq() you can target the third cell in the table:

$('#table_header td').eq(2).html('new content');

If you wanted to target every third cell in each row, use the nth-child-selector:

$('#table_header td:nth-child(3)').html('new content');

Upvotes: 17

Iman
Iman

Reputation: 18916

i was looking for changing second row html and you can do cascading selector

$('#tbox1 tr:nth-child(2) td').html(11111)

Upvotes: 2

PutihTua
PutihTua

Reputation: 112

You can do this :

<table id="table_header">
<tr>
   <td contenteditable="true">a</td>
   <td contenteditable="true">b</td>
   <td contenteditable="true">c</td>
</tr>
</table>

Upvotes: -4

Igor
Igor

Reputation: 33993

You can use CSS selectors.

Depending on how you get that td, you can either give it an id:

<td id='cell'>c</td>

and then use:

$("#cell").text("text");

Or traverse to the third cell of the first row of table_header, etc.

Upvotes: 12

hunter
hunter

Reputation: 63522

$("td:contains('c')").html("new");

or, more precisely $("#table_headers td:contains('c')").html("new");

and maybe for reuse you could create a function to call

function ReplaceCellContent(find, replace)
{
    $("#table_headers td:contains('" + find + "')").html(replace);
}

Upvotes: 33

Related Questions