Преодоление псевдо-классов n-го ребенка с помощью jQuery

Question

Я построил таблицу и с помощью псевдоклассов CSS добавил немного затенения к четному и нечетному количеству строк.

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

У меня есть третий класс, который я хочу реализовать, когда выбран элемент <tr>, он меняет цвет фона всей строки на синий.

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

Моя проблемаявляется то, что .tableRow_selected даст этой строке жирный шрифт, но не изменит цвет фона, потому что nth-child переопределяет его.Как мне достичь желаемого эффекта?

РЕДАКТИРОВАТЬ: ДОБАВЛЕННЫЙ КОД 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>

Answer 1

Ваша проблема в том, что td имеет цвет фона, поэтому вам нужно изменить его:

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

Однако вам также нужно беспокоиться о CSS Specificity , поэтомувыше не подойдет, нужно конкретизировать

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>