具有可选行的交替颜色行表问题

Question

我遇到了一个生成表的问题，该表具有交替的行并且行是可选的。

$(document).ready(function() {
  $("tr").click(function() {
    $(this).toggleClass("highlighted");
  })
});

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  vertical-align: top;
  margin-bottom: 15px;
  border: 1px solid #999999;
}
th {
  font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #F2EDEB;
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  border-top: 1px solid #C1DAD7;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 6px 6px 6px 12px;
  background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
  background: #fff;
  color: #261F1D;
}
tr:hover,
tr.alt:hover {
  color: #261F1D;
  background-color: #E5C37E;
}
.highlighted {
  color: #261F1D;
  background-color: #E5C37E;
}
tr.alt {
  background: #F5FAFA;
  color: #B4AA9D;
}
td {
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  padding: 6px 6px 6px 12px;
}
tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="fooBar" border="0">
  <tr>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
</table>

我的问题是：如果我把交替的颜色，选择行表功能不起作用，如果我删除它......它会再次起作用。有什么想法吗？

我需要动态创建一个表，其中包含可选择的交替行。我希望能够使用一些非常基本的东西，不需要数据表库的所有功能。

Answer 1

您只需要稍微重新组织规则。在您的原始演示中，伪选择器tr:nth-child(odd) 或tr:nth-child(even) 比.highlighted 具有更高的特异性。您所要做的就是将相同的tr 选择器添加到.highlighted 它变成tr.highlighted，并将其移动到伪选择器下方，因为最后加载的规则适用于相同特异性选择器。

tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr.highlighted {
  color: #261F1D;
  background-color: #E5C37E;
}
tr:hover {
  color: #261F1D;
  background-color: #E5C37E;
}

请参阅下面的更新演示。

$(document).ready(function() {
  $("tr").click(function() {
    $(this).toggleClass("highlighted");
  })
});

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  vertical-align: top;
  margin-bottom: 15px;
  border: 1px solid #999999;
}
tr {
  background: #fff;
  color: #261F1D;
}
th {
  font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #F2EDEB;
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  border-top: 1px solid #C1DAD7;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 6px 6px 6px 12px;
  background: #522D25 url(images/bg_header.jpg) no-repeat;
}
td {
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  padding: 6px 6px 6px 12px;
}
tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr.highlighted {
  color: #261F1D;
  background-color: #E5C37E;
}
tr:hover {
  color: #261F1D;
  background-color: #E5C37E;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="fooBar" border="0">
  <tr>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
  <tr class="">
    <td>Text</td>
    <td>image</td>
    <td>Text</td>
    <td>image</td>
  </tr>
</table>

Answer 2

您可以在悬停和突出显示的样式上使用!important，以便这些样式将覆盖默认样式。

这里是小提琴：https://jsfiddle.net/1x1farow/