繁体   English   中英

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

[英]Change the background color of a row based on field value

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

例:

行A。字段#1的值=是

基于YES谷

B行。背景变为黄色。

有许多方法可以做您想要做的事情。 查看这个小提琴 ,看一个简单的例子。 在文本框中键入是,以查看突出显示的更改。 在您的问题中提供了更多信息后,我可以修改示例以使其更有用。

假设您有以下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;
}

首先使用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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM