文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Jquery无法使用css设置背景色(“background-color”，"#fde3e5!important")

问Jquery无法使用css设置背景色(“background-color”，"#fde3e5!important")
EN

Stack Overflow用户
提问于 2018-08-09 18:46:05
回答 2查看 38关注 0票数 0

我使用下面的代码来设置td的背景色：

​

代码语言：javascript
复制
$(function(){
$("#table_reach_condition_appoint tbody tr").each(function(){
        if($.trim($(this).children("td").eq(1).children("input").val())==""){
            $(this).children("td").eq(1).css("background-color","#fde3e5!important");
        }
        if($.trim($(this).children("td").eq(3).children("input").val())==""){
            $(this).children("td").eq(3).css("background-color","#fde3e5!important");
        }
        if($.trim($(this).children("td").eq(5).children("input").val())==""){
            $(this).children("td").eq(5).css("background-color","#fde3e5!important");
        }
    });
});

但是没有效果，哪里错了？我的html代码是here。

jquery
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-09 18:52:03

由于要为所有选定的<td>分配相同的背景色，因此最好使用一个类，而不是为每个<td>分配单独的css。

​

代码语言：javascript
复制
$(function(){
$("#table_reach_condition_appoint tbody tr").each(function(){      if($.trim($(this).children("td").eq(1).children("input").val())==""){
            $(this).children("td").eq(1).addClass("tdClass");
        }
        if($.trim($(this).children("td").eq(3).children("input").val())==""){
            $(this).children("td").eq(3).addClass("tdClass");
        }
        if($.trim($(this).children("td").eq(5).children("input").val())==""){
            $(this).children("td").eq(5).addClass("tdClass");
        }
    });
});
代码语言：javascript
复制
.tdClass{
  background-color: #fde3e5 !important;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>111</title> 
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<script>
$(function(){

$("#table_reach_condition_appoint tbody tr").each(function(){
		if($.trim($(this).children("td").eq(1).children("input").val())==""){
			$(this).children("td").eq(1).css("background-color","#fde3e5!important");
		}
		if($.trim($(this).children("td").eq(3).children("input").val())==""){
			$(this).children("td").eq(3).css("background-color","#fde3e5!important");
		}
		if($.trim($(this).children("td").eq(5).children("input").val())==""){
			$(this).children("td").eq(5).css("background-color","#fde3e5!important");
		}
	});
});
</script>

 </head> 
 <body> 
<div id="inner_div_reach_condition_appoint" class="panel-body">
        <table id="table_reach_condition_appoint" border="1" class="table table-bordered text-right">
          <thead>
            <tr class="table-thead-tr">
              <th class="text-center">No</th>
              <th colspan="4" class="text-center">AA</th>

              <th class="text-center">BB</th>
              <th class="text-center"></th>
            </tr>
            <tr>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
            </tr>
          </thead>
          <tbody id ="tbody_reach_condition_appoint">
            <tr>
              <td>1</td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/> 
              </td>
              <td class="text-center disabledItemBgColor">
                <span>before</span>
              </td>
              <td class="text-center">
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td class="text-center disabledItemBgColor">
              	<span>go</span>
              </td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td>
                <span class="deleteRow" onclick="delRow(this,'#table_reach_condition_appoint')">✖</span>
              </td>
            </tr>
			<tr>
              <td>2</td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/> 
              </td>
              <td class="text-center disabledItemBgColor">
                <span>before</span>
              </td>
              <td class="text-center">
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td class="text-center disabledItemBgColor">
              	<span>go</span>
              </td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td>
                <span class="deleteRow" onclick="delRow(this,'#table_reach_condition_appoint')">✖</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div> 
 </body>
</html>

​

如果您想使用现有代码，那么可以从css方法中删除!important，因为它不受支持。

​

代码语言：javascript
复制
$(function(){
$("#table_reach_condition_appoint tbody tr").each(function(){
        if($.trim($(this).children("td").eq(1).children("input").val())==""){
            $(this).children("td").eq(1).css("background-color","#fde3e5");
        }
        if($.trim($(this).children("td").eq(3).children("input").val())==""){
            $(this).children("td").eq(3).css("background-color","#fde3e5");
        }
        if($.trim($(this).children("td").eq(5).children("input").val())==""){
            $(this).children("td").eq(5).css("background-color","#fde3e5");
        }
    });
});
代码语言：javascript
复制
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>111</title> 
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<script>
$(function(){

$("#table_reach_condition_appoint tbody tr").each(function(){
		if($.trim($(this).children("td").eq(1).children("input").val())==""){
			$(this).children("td").eq(1).css("background-color","#fde3e5!important");
		}
		if($.trim($(this).children("td").eq(3).children("input").val())==""){
			$(this).children("td").eq(3).css("background-color","#fde3e5!important");
		}
		if($.trim($(this).children("td").eq(5).children("input").val())==""){
			$(this).children("td").eq(5).css("background-color","#fde3e5!important");
		}
	});
});
</script>

 </head> 
 <body> 
<div id="inner_div_reach_condition_appoint" class="panel-body">
        <table id="table_reach_condition_appoint" border="1" class="table table-bordered text-right">
          <thead>
            <tr class="table-thead-tr">
              <th class="text-center">No</th>
              <th colspan="4" class="text-center">AA</th>

              <th class="text-center">BB</th>
              <th class="text-center"></th>
            </tr>
            <tr>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
              <th style="display:none;"></th>
            </tr>
          </thead>
          <tbody id ="tbody_reach_condition_appoint">
            <tr>
              <td>1</td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/> 
              </td>
              <td class="text-center disabledItemBgColor">
                <span>before</span>
              </td>
              <td class="text-center">
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td class="text-center disabledItemBgColor">
              	<span>go</span>
              </td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td>
                <span class="deleteRow" onclick="delRow(this,'#table_reach_condition_appoint')">✖</span>
              </td>
            </tr>
			<tr>
              <td>2</td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/> 
              </td>
              <td class="text-center disabledItemBgColor">
                <span>before</span>
              </td>
              <td class="text-center">
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td class="text-center disabledItemBgColor">
              	<span>go</span>
              </td>
              <td>
                <input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|^\d{1,}\%|\d{1,}]/g,'')"/>
              </td>
              <td>
                <span class="deleteRow" onclick="delRow(this,'#table_reach_condition_appoint')">✖</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div> 
 </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2018-08-09 18:53:30

您可以使用odd或even jquery选择器，它将根据表中的奇数或偶数索引选择行。对相应的表行使用类作为背景色和addClass

​

代码语言：javascript
复制
$(function(){
$("#table_reach_condition_appoint tbody tr:odd").addClass('rowColor');
});
代码语言：javascript
复制
.rowColor {
 background-color: #fde3e5 !important;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_reach_condition_appoint">
 <tr><th>Head 1</th><th>Head 2</th></tr>
 <tr><td>1</td><td>1</td></tr>
 <tr><td>2</td><td>2</td></tr>
 <tr><td>3</td><td>3</td></tr>
 <tr><td>4</td><td>4</td></tr>
</table>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51764944

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档