Change the content a Span as the same Class in a table - jQuery

Question

well, I’m having a problem with a table, where I wish that by clicking on a certain line button the specific span of where I clicked changed text, but I’m not able to do that, I’ll be making the code available here below. PS(When I click on the button the specific line changes color, this I got, but in the same function I’m trying to change the span). I thank you already!

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Mesa</th>
      <th scope="col">Ocupacidade</th>
      <th scope="col">Status</th>
      <th scope="col">Ocupar Mesa</th>
      <th scope="col">Desocupar Mesa</th>

    </tr>
  </thead>
  <tbody class="dtable">
    <tr>
      <th scope="row">#1</th>
      <td>2 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-sm btn-light disponivel">✔</button></td>
      <td><button type="button" class="btn btn-light btn-sm ocupado">❌</button></td>
    </tr>
    <tr>
      <th scope="row">#3</th>
      <td>6 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-light btn-sm disponivel">✔</button></td>
      <td><button type="button" class="btn btn-sm btn-light ocupado">❌</button></td>
    </tr>
    <tr>
      <th scope="row">#7</th>
      <td>4 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-light btn-sm disponivel">✔</button></td>
      <td><button type="button" class="btn btn-sm btn-light ocupado">❌</button></td>
    </tr>
  </tbody>
</table>

<script>
    **$("button.ocupado").click(function() {
      $(this).find("span.texto").text('Ocupado');
      $(this).parent().parent().removeClass('row-disponivel');
      $(this).parent().parent().addClass('row-ocupado');
    });**

    $("button.disponivel" ).click(function() {
      $(this).parent().parent().removeClass('row-ocupado');
      $(this).parent().parent().addClass('row-disponivel'); 
    });
</script>

Answer 1

Your code already had everything you needed. See that to change the line style, you used the this with reference, which represented the button, then used parent() to get into the td, another parent() to get into the tr to then remove/add the correct class, just use this to find the span :)

Take the example:

$("button.ocupado").click(function() {
      $(this).parent().parent().find("span.texto").text('Ocupado');
      $(this).parent().parent().removeClass('row-disponivel');
      $(this).parent().parent().addClass('row-ocupado');
    });

$("button.disponivel" ).click(function() {
      $(this).parent().parent().find("span.texto").text('Disponível');
      $(this).parent().parent().removeClass('row-ocupado');
      $(this).parent().parent().addClass('row-disponivel'); 
});

.row-ocupado {
   background-color: red
}

.row-disponivel {
   background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Mesa</th>
      <th scope="col">Ocupacidade</th>
      <th scope="col">Status</th>
      <th scope="col">Ocupar Mesa</th>
      <th scope="col">Desocupar Mesa</th>

    </tr>
  </thead>
  <tbody class="dtable">
    <tr class="row-disponivel">
      <th scope="row">#1</th>
      <td>2 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-sm btn-light disponivel">✔</button></td>
      <td><button type="button" class="btn btn-light btn-sm ocupado">❌</button></td>
    </tr>
    <tr class="row-disponivel">
      <th scope="row">#3</th>
      <td>6 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-light btn-sm disponivel">✔</button></td>
      <td><button type="button" class="btn btn-sm btn-light ocupado">❌</button></td>
    </tr>
    <tr class="row-disponivel">
      <th scope="row">#7</th>
      <td>4 Pessoas</td>
      <td><span class="badge badge-pill badge-success texto">Disponível</span></td>
      <td><button type="button" class="btn btn-light btn-sm disponivel">✔</button></td>
      <td><button type="button" class="btn btn-sm btn-light ocupado">❌</button></td>
    </tr>
  </tbody>
</table>

Answer 2

find() is searching for the span.text element from the button, you need to scroll down two levels (..td ..tr) to find() locate the span.text.

Would look like this:

$(this).parent().parent().find("span.texto").text('Ocupado');

The same for the button available.

$(this).parent().parent().find("span.texto").text('Disponível');

I hope it helps. Abs.