用jQuery覆盖第n个子伪类 [英] Overing nth-child pseudo classes with jQuery

问题描述

我建立了一个表，并使用css伪类为偶数和奇数行添加了一些阴影.

I built a table and with css pseudo classes I added some shading to the even and odd number of rows.

table tr:nth-child(odd) td {
  background-color: #fff;
}

table tr:nth-child(even) td {
  background-color: #F8F8F8;
}

.tableRow_selected {
        background-color: blue !important;
        font-weight: bold;
 }

我有第三类，我想当元素被选择它改变了整个行到蓝色的背景颜色来实现.

I have a third class that I want to implement when a <tr> element is selected it changes the background color of the whole row to blue.

  var $tr = $('tbody tr').click(function() {
      $tr.removeClass('tableRow_selected');
      console.log(this);
      $(this).addClass('tableRow_selected');
  });

我的问题是.tableRow_selected将给该行加粗打印，但不会更改背景颜色，因为第n个子项将其覆盖.如何获得想要的效果?

My problem is that the .tableRow_selected will give that row a bold print but wont change the background color because the nth-child overrides it. How do I achieve the affect I desire?

添加的EJS代码

  <tbody class="scroll" id="upcoming__body">
    <% data.forEach((record, index) => { %>
    <tr>
      <td><%=record.start%>
          <!-- <span style="display: block;font-size:10pt;"><%=record.time%></span> -->
          <% if(page_name === '/course-record') { %>
          <p class="timer" style="font-size: 8pt; color: red; font-weight:bold;"></p>
          <% } else { %>
          <p style="font-size: 8pt; color: red; font-weight:bold;">Class Complete</p>
          <% } %>
      </td>
      <% if(page_name === '/course-record'){ %>
      <td>
        <a href='/teaching'><input type="image" class="web_camera" src="/img/camera.png" disabled></a>
        <div class="join_class">

        </div>
      </td>
      <% } %>
      <td>
        <div class="row d-flex justify-content-center">
          <div class="col-3-sm">
            <a style="color:black;" href='/course-description'><%=record.courseName%></a>
            <span style="display:block; font-size:10pt;"><%=record.title%></span>
          </div>
          <div class="col-3-sm d-flex align-items-center">
            <img class="ml-2" src="<%=(record.type == 'I' ? '/img/course-record/I.png' : '/img/course-record/G.png') %>"
                 alt="">
          </div>
        </div>

      </td>
      <td style="padding-top: 20px;">
        <div class="row d-flex justify-content-center">
          <% Object.getOwnPropertyNames(record.students).forEach((k) => { %>
          <div class="col-3-sm ml-1 mr-1">
            <figure>
              <a href='/student_profile'><img src="<%=record.students[k].studentThumbnail%>"></a>
              <figcaption><b><%=record.students[k].studentId%></b></figcaption>
            </figure>
          </div>
          <% }) %>
        </div>
      </td>

      <td>
          <% if(index == 0) { %>
          <span style="color:#1A9AB3;font-size: 6pt;">Received</span>
          <% } %>
          <span style="display:block; font-size: 16pt; color:green;">$<%=record.moneyReceived%></span>
      </td>

      <td>
        <% if(index == 0) { %>
        <!-- <div>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Message</p>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Create Quiz</p>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Change Course</p>
        </div> -->
        <% } %>
        <button data-toggle="modal" data-target="#MessageModal" rel="tooltip" data-placement="top" title="Send Message" class="record_icons"><img src="/img/message.png"></img></button>
        <a href = '/create_quiz 'rel="tooltip" data-placement="top" title="Create Quiz" class="record_icons"><img src="/img/plus-course-record.png"></img></a>
        <!-- <a href='/student_grading' rel="tooltip" data-placement="top" title="Grading & Feedback"  class="record_icons"><img src="/img/nike.png"></img></a> -->
        <button data-toggle="modal" data-target="#ChangeModal" rel="tooltip" data-placement="top" title="Change Course" class="record_icons"><img src="/img/change.png"></img></button>
        <!-- <button data-toggle="modal" data-target="#CancelModal" rel="tooltip" data-placement="top" title="Cancel Course" class="record_icons"><img src="/img/x.png"></img></button> -->
      </td>
    </tr>

推荐答案

您的问题是td具有背景色，因此您需要进行以下更改:

Your problem is that the td has a background color, so you need to change that:

tr.tableRow_selected td {
  background-color: #666666;
}

但是，您还需要担心 CSS特异性，因此上述内容不会工作，您需要使其更具体

However, you also need to worry about CSS Specificity so the above will not work, you need to make it more specific

table tr.tableRow_selected td {
  background-color: #666666;
}

var $tr = $('tbody tr').click(function() {
  $tr.removeClass('tableRow_selected');
  console.log(this);
  $(this).addClass('tableRow_selected');
});

table tr:nth-child(odd) td {
  background-color: #fff;
}

table tr:nth-child(even) td {
  background-color: #F8F8F8;
}

tr.tableRow_selected {
  font-weight: bold;
}
table tr.tableRow_selected td {
  background-color: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

这篇关于用jQuery覆盖第n个子伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！