javascript - 带有可选行的交替颜色行表的问题

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>