Tengo una tabla HTML simple y tiene un botón HTML debajo, como se muestra a continuación.

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

¿Es posible ocultar todas las filas que pertenecen a la Compañía A cuando hago clic en ese botón?

Sé que puedo ocultar elementos usando $(selector).hide() pero no estoy seguro de cómo puedo seleccionar / ocultar solo ciertas filas en función de algún valor.

0
Aaron Wilfred 2 mar. 2018 a las 01:28

3 respuestas

La mejor respuesta

Basado solo en el html de muestra proporcionado. Dentro de su controlador de clics, usar el selector correcto para encontrar el primer td de cada tr y luego recorrer cada uno para realizar la lógica de decisión funcionaría:

$("tr td:first-child").each(function(index){
    if($(this).text() === "A") {
        $(this).closest("tr").hide();
    }
});
1
AkaPeyton 1 mar. 2018 a las 22:43

Agregue una clase a cada fila con un identificador de compañía:

 <tr class="company-a">
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

Luego, en su jQuery puede ir algo como:

$('.company-a').hide()

Agregué un violín para mostrar cómo podría funcionar: https://jsfiddle.net/qmrkdesf/6/

1
JanR 1 mar. 2018 a las 22:43

Puede hacer lo siguiente:

(Tenga en cuenta que seleccionar elementos por sus nombres de etiqueta es una mala práctica. En su lugar, debe agregar algunos atributos de datos y luego usar $('[data-my-table]') y demás).

$(function() {
  $('button').on('click', () => {
    $('table td:first-child')
      .filter((_, cell) => $(cell).text() === 'A')
      .closest('tr')
      .hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

</body>
</html>
1
Jeto 1 mar. 2018 a las 22:43