Question

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

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

Answer 1

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

$(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");
        }
    });
});

.tdClass{
  background-color: #fde3e5 !important;
}

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

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

$(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");
        }
    });
});

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

Answer 2

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

$(function(){
$("#table_reach_condition_appoint tbody tr:odd").addClass('rowColor');
});

.rowColor {
 background-color: #fde3e5 !important;
}

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

jQuery不能使用CSS设置背景颜色（“ background-color”，“＃fde3e5！important”）

2 个答案: