javascript - 高亮行未按预期 jquery 工作

Question

我有一个绑定(bind)主数据和子数据的表，当子数据中没有数据时，我想用绿色突出显示整个 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 并不完全，所以有人可以帮助我，我有行计数，它根据我添加的类显示数字。

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

Answer 1

您的 CSS 规则会覆盖它，因为 specificity

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


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

特异性更高，因此它会覆盖您的特异性。