CODEWITHSUNDEEP
javascriptjqueryhtml
little rebel
little rebel

Reputation: 37

How to get a certain column from a table row

I'm trying to replace the text and css of the 3rd column of a certain table row, I have unique id from button on each row..

Iv'ed seen some doing this $('#feedbacks tr:nth-child(3) td')

here's a row from my table

  <tr role="row" class="odd">
      <td class="sorting_1" tabindex="0">awdawd</td>
      <td>[email protected]</td>
      <td>
         <span class="text-success">Opened</span>
      </td>
      <td>04:16PM Wednesday - 21st Aug 2019</td>
      <td class=" text-center">
         <button type="button" rel="tooltip" title="view" class="btn btn-simple btn-info btn-icon view" id="77">
            <i class="material-icons">pageview</i>
         </button>
      </td>
  </tr>

Upvotes: 0

Views: 98

Answers (3)

itzmekhokan
itzmekhokan

Reputation: 2770

Assume that on click each tr view button you want to change 3rd td span class and text. Then do as follows -

$(document).on('click', '.view', function(){
    $(this).parents('tr').find('td:nth-child(3) span').text("Unread").removeClass("text-success").addClass("text-error");
});

Upvotes: 1

Sanjun Dev
Sanjun Dev

Reputation: 518

In this case, you can change the text by using Jquery like below.

are you changing your table content on every row's button click? then

$('.view').on('click',function(){
    $(this).parents('tr').find('span').html('changed Text').css('color','#fdcc');
});

or like this

$("td:nth-child(3)").css("background-color", "yellow");

Upvotes: 1

Shir Gans
Shir Gans

Reputation: 2027

try this selector. tr td:nth-child(3)

Better to have a unique ID for the table

mytable tr td:nth-child(3)

Upvotes: 0

Related Questions