javascript - 根据字段值更改行的背景颜色

Question

我有一个 HTML 表单。我需要能够根据另一行中字段的值更改表中行的背景。

例子：

A行。字段#1值=YES

基于 YES 值

B 行。背景变为黄色。

Answer 1

有很多方法可以做你想做的事。看看这个小提琴一个简单的例子。在文本框中键入 Yes 以查看突出显示的变化。在您的问题中提供更多信息，我可以修改示例以使其更有用。

假设您有以下 HTML：

<form>
<table>
    <tr>
        <td><input type="text" id="field1"/></td>
        <td>Something else</td>
    </tr>
    <tr class="rowb">
        <td>Some value</td>
        <td>Some other value</td>
    </tr>
</table>
</form>

以及以下 jQuery JavaScript：

$(document).ready(function(){
      $("#field1").change(function(){
          $(".rowb").addClass($("#field1").val() == "Yes"?"highlight":"lowlight");
      });
 });

以及以下 CSS：

   .highlight{
    background-color:yellow;
}

.lowlight{
    background-color:blue;
}

Answer 2

首先使用 id 属性给第 1 行和第 2 行一个 id

加载html时该值是否已设置为true？

如果是，则将 onLoad="changeBG" 添加到表中 如果没有，则在 feild1 上添加 onChange="changeBG" 然后添加此代码

<script type="text/javascript" >
    function  changeBG () {
    if(document.getElementById("feild1").getAttribute(value) == true)
       document.getElementById("rowB").setAttribute(background-color,yellow) ;
       }
</script>