Question

我有一个绑定主数据和子数据的表，当子数据中没有数据时，我想用绿色突出显示整个tr，它与我编写的代码部分兼容

$("#Main tbody>tr").each(function() {
  var textval = $(this).find($("[id$='_rowCount']")).text();

  if (parseInt(textval) === 0) {
    $(this).addClass("alert-success");
  } else {
    $(this).removeClass("alert-success");
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered" cellspacing="0" rules="all" border="1" id="Main" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td class="search-table-item">
        <div class="row">
          <div class="col-md-4">
            <strong>
				<span id="Main_ctl02_Label4" class="left-loated">Test</span>
			</strong>
            <span id="Main_ctl02_rowCount" class="rowStyle hidden">1</span>
          </div>
        </div>
        <div>
          <table class="table table-bordered" cellspacing="0" rules="all" border="1" id="Main_ctl02_Child" style="border-collapse:collapse;">
            <tbody>
              <tr>
                <td class="col-md-1">Data exists</td>

              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td class="search-table-item">
        <div class="row">
          <div class="col-md-4">
            <strong>
   				<span id="Main_ctl03_Label4" class="leftfloated">Test1</span>
												</strong>
            <span id="Main_ctl03_rowCount" class="rowStyle hidden">0</span>
          </div>
        </div>
        <div>
          <table class="table table-bordered" cellspacing="0" rules="all" border="1" id="Main_ctl03_Child" style="border-collapse:collapse;">
            <tbody>
              <tr>
                <td colspan="6">No Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td class="search-table-item">
        <div class="row">
          <div class="col-md-4">
            <strong>
			<span id="Main_ctl03_Label4" class="left-floated">Test2</span>
												</strong>
            <span id="Main_ctl03_rowCount" class="rowStyle hidden">0</span>
          </div>
        </div>
        <div>
          <table class="table table-bordered" cellspacing="0" rules="all" border="1" id="Main_ctl03_Child" style="border-collapse:collapse;">
            <tbody>
              <tr>
                <td colspan="6">No Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

您看到第二个tr用绿色突出显示，因为第三个tr并不完全，所以有人可以帮助我，我正在使用rowcount，其中显示的行号是基于我添加班级的。

我的猜测是由于表table table-striped table-bordered的默认类引起的，但我想保留此表并根据需要应用样式

Answer 1

由于specificity

，您的CSS规则将其覆盖

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}


.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

特异性更高，因此可以覆盖您的特异性。

高光行无法按预期工作

1 个答案: