How to set background color for each column in table?

Question

I have a table with four columns and two rows, 4th column have a button for each rows, now I want to change the background color in the second column of second row while click the button for each rows. Please let me know how to do this.

Here I have placed my code for your reference.

$(function(){
    $('input').click(function(){
        $('table').find('tr td:eq(1)').css('background-color', 'red');
    });
});

HTML

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>1</td>
        <td>jai</td>
        <td>description</td>
        <td><input type="button" value="button"></input></td>
    </tr>
    <tr>
        <td>2</td>
        <td>sul</td>
        <td>description</td>
        <td><input type="button" value="button"></input></td>
    </tr>
</table>

Take a look at this question: http://stackoverflow.com/questions/21859352/change-background-color-for-a-specific-column-in-a-html-table?rq=1 — Berat Cevik, Jan 27 '16 at 12:13

score 4 · Accepted Answer · answered Aug 22 '15 at 18:33

Find the tr containing the button using closest(), then find the second column using that

$(function() {
  $('input').click(function() {
    $(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
  <tr>
    <td>1</td>
    <td>jai</td>
    <td>description</td>
    <td>
      <input type="button" value="button"></input>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>sul</td>
    <td>description</td>
    <td>
      <input type="button" value="button"></input>
    </td>
  </tr>
</table>

@ajai : glad to help :) – Pranav C Balan Aug 22 '15 at 18:44 — Pranav C Balan, Aug 22 '15 at 18:44

score 3 · Answer 2 · answered Aug 22 '15 at 18:33

You don't need to use a heavy JavaScript / jQuery for this case. Instead you can use <col>:

<table border="1" style="border-collapse:collapse;">
  <col style="background-color: #f00;" />
  <col style="background-color: #0f0;" />
  <col style="background-color: #00f;" />
  <col style="" />
  <tr>
    <td>1</td>
    <td>jai</td>
    <td>description</td>
    <td><input type="button" value="button" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td>sul</td>
    <td>description</td>
    <td><input type="button" value="button" /></td>
  </tr>
</table>

Also note that you don't have </input> which might fail some code (eg. syntax highlighters).

@Michael_B Yes, I have mentioned that. Didn't I? – Praveen Kumar Purushothaman Aug 22 '15 at 20:44 — Praveen Kumar Purushothaman, Aug 22 '15 at 20:44

Akshay Chawla · Answer 3 · 2015-08-22T19:09:15.610

Try this,

If you are aware of parent() in jquery then you can also try this,

$(function() {
    $('input').click(function() {
    $(this).parent().parent().find('td:eq(1)').css('background-color', 'red');
  });
});

" $(this).parent().parent().find('td:eq(1)') " In this line of js, it will move to its parent tag twice, means $(this) is clicked input control and from that it will move to its parent tag twice to reach to its tag and from that position it will find the td at position 1. From here onwards you can do your color changing operation like shown in above js code.

How to set background color for each column in table?

3 Answers3