CODEWITHSUNDEEP
jqueryhtml
Storm Spirit
Storm Spirit

Reputation: 1510

How to change html on inside table cells using Jquery

I can get already the specied row by using this

var clicked_tr = null;
....
clicked_tr = $(this).parent().parent();

but I don't know how to get the column, so If I had

<table>
  <tr>
    <td>Value1</td>
    <td>Value2</td>
    <td>Value3</td>
    <td><a href="#" class="btn btn-primary btn-xs update" data-toggle="modal" data-target="#updateData" data-id='<? echo $MissingConfNum['uniqueid'] ?>'><span class="fa fa-edit"></span> Update</a></td>
  </tr>
  ....
</table>

how to change data on 2nd column by using this clicked_tr variable.

change value2 into nicenicenice

Upvotes: 0

Views: 36

Answers (2)

Swiffy
Swiffy

Reputation: 4693

Here:

https://jsfiddle.net/gnbvqLfz/1/

$('#sometable').on('click', 'tr', function()
{
    $clicked = $(this).children('td:nth-child(2)').text('Hello!')
})

I gave the table an id and bound a click event to its rows. Now $(this) refers to the clicked row and $(this).children('td') would refer to each td of the clicked row.

Upvotes: 1

Mottie
Mottie

Reputation: 86453

I don't see how you are defining clicked_tr, but it would be better to use delegated event binding and jQuery .closest() instead of two .parent() calls.

$(function(){
  $('table').on('click', '.update', function(){
    // value will contain the new value to add to the td
    var value = 'nicenicenice';
    $(this).closest('tr').find('td:eq(1)').html( value );
  });
});

Upvotes: 0

Related Questions