Question 11067 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Reverting the style of the class – Jquery

I am learning how to code and unfortunately, I am stuck on one exercise.

I have a table containing 2 different rows of colors, and I want to invert the colors — the tr class .vermelho needs to be .azul, and .azul to be .vermelho.

I tried the following JS code, but it’s setting the whole table with a single color. Would you please be so kind to help me identify the error on the JS code? Sorry for any English typo I am not native:

function invertStyle() {
  if ($('.vermelho').hasClass('vermelho')) {
    $('.vermelho').removeClass('vermelho').addClass('azul');
  } else if ($('.azul').hasClass('azul')) {
    $('.azul').removeClass('azul').addClass('vermelho');
  }
}
table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table id="tabela">
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
    <tr class="azul">
      <td>João</td>
      <td>40</td>
    </tr>
    <tr class="vermelho">
      <td>Maria</td>
      <td>50</td>
    </tr>
    <tr class="azul">
      <td>Ana</td>
      <td>20</td>
    </tr>
    <tr class="vermelho">
      <td>Pedro</td>
      <td>10</td>
    </tr>
    <tr class="azul">
      <td>Lúcio</td>
      <td>25</td>
    </tr>
    <tr class="vermelho">
      <td>Júlia</td>
      <td>15</td>
    </tr>
  </table>
  <input type="button" value="Inverter estilo" onClick="invertStyle()" />
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up using the following JS code, and it worked:

    function invertStyle() {
  $('.vermelho, .azul').each(function() {
    if ($(this).hasClass('vermelho')) {
      $(this).removeClass('vermelho').addClass('azul');
    } else if ($(this).hasClass('azul')) {
      $(this).removeClass('azul').addClass('vermelho');
    }
  });
}
    html, body {
  height: 100%;
  width: 100%;
}

table{
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho{
  background-color: #f96c6c;
}

.azul{
  background-color: #5757ff;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Exercise</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <table id="tabela">
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
    <tr class="azul">
      <td>João</td>
      <td>40</td>
    </tr>
    <tr class="vermelho">
      <td>Maria</td>
      <td>50</td>
    </tr>
    <tr class="azul">
      <td>Ana</td>
      <td>20</td>
    </tr>
    <tr class="vermelho">
      <td>Pedro</td>
      <td>10</td>
    </tr>
    <tr class="azul">
      <td>Lúcio</td>
      <td>25</td>
    </tr>
    <tr class="vermelho">
      <td>Júlia</td>
      <td>15</td>
    </tr>
  </table>
  <hr>
  <input type="button" value="Inverter estilo" onClick="invertStyle()" />


</html>


  2. 0

    Select all tr except the first row, and toggle the class on each click.

    Please see the code snippet below. In short, I’ve solved like the following:

    1. Store all tr rows in a variable rows
    2. Each time the button is clicked, iterate the tr list to check their current class name.
      • If currently azul, make it vermelho.
      • If currently not azul (i.e. it’s vermelho), make it azul.

    I tried to make everything self-explanatory, and the only potentially confusing thing might be the ternary operator. See MDN Docs for Ternary Conditional.

    const button = document.querySelector('input[type="button"]');
const rows = document.querySelectorAll('tr:not(:first-child)');

button.addEventListener('click', function() {
  rows.forEach(row => {
    const currentClass = row.className;
    row.className = currentClass === 'azul' ? 'vermelho' : 'azul';
  });
});
    table {
  border-collapse: collapse;
  text-align: center;
  width: 100px;
}

.vermelho {
  background-color: red;
}

.azul {
  background-color: blue;
}
    <table id="tabela">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr class="azul">
    <td>João</td>
    <td>40</td>
  </tr>
  <tr class="vermelho">
    <td>Maria</td>
    <td>50</td>
  </tr>
  <tr class="azul">
    <td>Ana</td>
    <td>20</td>
  </tr>
  <tr class="vermelho">
    <td>Pedro</td>
    <td>10</td>
  </tr>
  <tr class="azul">
    <td>Lúcio</td>
    <td>25</td>
  </tr>
  <tr class="vermelho">
    <td>Júlia</td>
    <td>15</td>
  </tr>
</table>
<input type="button" value="Inverter estilo" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search