交替颜色行表与可选行

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>

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

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

Answer 1

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

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

请参阅下面的更新演示。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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