CODEWITHSUNDEEP
javascripthtmlcss
zrna
zrna

Reputation: 594

Change table rows background colors

I need to set the background color of table row depending on the selected color in the select.

I have some difficulties so I need help.

When I choose the color from one select, color is applied on every row, and that is not what I want. I want the color to be applied to that specific row in which the color is selected

Can someone help me, please?

HTML: 

<table id="color-table">
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
  <br />
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
</table>

CSS:

.red{

  background: #ff3333;
}

.yellow{
  background: #ffff80;
}

.green{
  background: #80ff80;
}

JS:

$("select").on('change', function() {
        var sel = $("select").val();
        if (sel =='red')
        {
            $(this).addClass("red");
        } 
        else if (sel == 'yellow')
        {
            $(this).addClass("yellow");
        } 
        else if (sel == 'green')
        {
            $(this).addClass("green");
        }
     });

     $('select').change(function () {
        $('#color-table').removeClass('red yellow green').addClass(
            $(this).find('option:selected').text().toLowerCase()
        );
    })
    .change();

Fiddle is here: https://jsfiddle.net/lzrnic/9j2cg1qw/

Upvotes: 0

Views: 171

Answers (2)

j08691
j08691

Reputation: 208002

You can reduce everything you have to just:

$('select').change(function() {
  $(this).closest('tr').removeClass().addClass($(this).val())
}).change()


$('select').change(function() {
  $(this).closest('tr').removeClass().addClass($(this).val())
}).change()
.red {
  background: #ff3333;
}

.yellow {
  background: #ffff80;
}

.green {
  background: #80ff80;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="color-table">
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
  <br />
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
</table>

Upvotes: 0

Phiter
Phiter

Reputation: 14982

You could simply use the select's value as the classname.

removeClass() without arguments will remove all classes, by the way.

$("select").on('change', function() {
  $(this).closest('tr').removeClass().addClass($(this).val());
}).trigger('change');
.red{
  background: #ff3333;
}

.yellow{
  background: #ffff80;
}

.green{
  background: #80ff80;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="color-table">
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
  <br />
  <tr>
    <td>First name</td>
    <td>Last name</td>
    <td>Address</td>
    <td>
      <select>
        <option value="red">Red</option>
        <option value="yellow">yellow</option>
        <option value="green">green</option>
      </select>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions