CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
ajai
ajai

Reputation: 197

How to set background color for each column in table?

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>

Upvotes: 0

Views: 2680

Answers (3)

Akshay Chawla
Akshay Chawla

Reputation: 613

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.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

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>

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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).

Upvotes: 3

Related Questions