更改表行背景颜色-Java 学习之路

我需要根据select中选择的颜色设置表格行的背景颜色 .

我有一些困难，所以我需要帮助 .

当我从一个选择中选择颜色时，每行都应用颜色，这不是我想要的 . 我希望将颜色应用于选择颜色的特定行

有谁可以帮助我吗？

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>
  

  <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：

. 红色{

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();

小提琴在这里：https://jsfiddle.net/lzrnic/9j2cg1qw/

2 回答

您可以简单地使用select的值作为类名 .

顺便说一句，没有参数的 removeClass() 将删除所有类 .

$("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>
  

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

回复于 2024-05-10T13:13:43+08:00

你可以减少你所拥有的一切：

$('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>
  

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

回复于 2024-05-10T13:13:43+08:00

更改表行背景颜色

2 回答

相关问题