根据输入值更改表格行的背景颜色

Question

当状态打开时，背景将保持白色，因此如果状态更改为关闭，我想将背景设为绿色。任何想法。谢谢

＆＃13;

＆＃13;

Mysig.htm

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 使用.change()事件确定select的当前文本。
2. 使用.closest()获取tr

$("select").change(function(){
$("option:selected",this).text().trim().toLowerCase() == "open" ? $(this).closest("tr").css("background-color","white") : $(this).closest("tr").css("background-color","green")

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' cellpadding='25'>

<th>Status</th>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td></tr><br>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td></tr><br>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td></tr><br>

</table>

添加和删除课程

$("select").change(function() {
  $(this).closest("tr").removeClass("white green")
  $("option:selected", this).text().trim().toLowerCase() == "open" ? $(this).closest("tr").addClass("white") : $(this).closest("tr").addClass("green")

})

.white {
  background-color: white
}

.green {
  background-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' cellpadding='25'>

  <th>Status</th>
  <tr>
    <td><select><option value="">Open</option><option value="">Closed</option></select></td>
  </tr><br>
  <tr>
    <td><select><option value="">Open</option><option value="">Closed</option></select></td>
  </tr><br>
  <tr>
    <td><select><option value="">Open</option><option value="">Closed</option></select></td>
  </tr><br>

</table>

Answer 2

您可以使用解决方案https://jsfiddle.net/qf3b3b7p/

＆＃13;

＆＃13;

$('select').change(function(){
		if($(this).val() === 'open') {
      $(this).parent().css({
        'background-color': '#fff'
      });
    }else{
    	$(this).parent().css({
        'background-color': 'green'
      });
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' cellpadding='25'>

<th>Status</th>
<tr><td><select><option value="open">Open</option><option value="closed">Closed</option></select></td></tr><br>
<tr><td><select><option value="open">Open</option><option value="closed">Closed</option></select></td></tr><br>
<tr><td><select><option value="open">Open</option><option value="closed">Closed</option></select></td></tr><br>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用change事件检查selectedIndex属性，以便向父td添加/删除课程。

或者更改为整行颜色...只需定位父tr，如下面的代码段所示。

$("select").on("change",function(){
  
  var parent = $(this).parents("tr");
  
  ( $(this)[0].selectedIndex == 1 ) ? parent.addClass("closed") : parent.removeClass("closed");
});

.closed{
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border='1' cellpadding='25'>

<th>Status</th><th>Other</th><th>Something</th>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td><td>Other cell</td><td>Other cell</td></tr><br>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td><td>Other cell</td><td>Other cell</td></tr><br>
<tr><td><select><option value="">Open</option><option value="">Closed</option></select></td><td>Other cell</td><td>Other cell</td></tr><br>
</table>