Tengo una tabla HTML donde los datos se muestran desde la tabla de datos y donde se asigna una función con el uso de una ID TAG que oculta el <td> con el ID private-mode cuando hace clic en el botón.
pero la función solo parece funcionar para la primera fila y no para las otras filas. He verificado las otras filas con la función de elemento de inspección en Chrome y todas tienen el ID private-mode
¿Alguien puede explicarme por qué no funciona para las otras filas?
Botón:
<button onclick="privatemode()">Private mode</button>tabla html:
<div class="cards card"> <table class="table hoverTable"> <tr> <th></th> <th>Omschrijving</th> <th>Bedrijf</th> <th>Betaalmethode</th> <th>Bedrag</th> </tr> <!-- PHP CODE TO FETCH DATA FROM ROWS --> <?php // LOOP TILL END OF DATA while($rows=$result->fetch_assoc()) { ?> <tr> <!-- FETCHING DATA FROM EACH ROW OF EVERY COLUMN --> <th><input class="checkbox1" type="checkbox"></th> <td><?php echo $rows['Omschrijving'];?></td> <td><?php echo $rows['Bedrijf'];?></td> <td><?php echo $rows['Betaalmethode'];?></td> <td id="private-mode"><?php echo $rows['Bedrag'];?></td> </tr> <?php } ?> </table> </div>JavaScript:
function privatemode() { var x = document.getElementById("private-mode"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }El atributo de id HTML se utiliza para especificar una identificación única para un elemento HTML. No puede tener más de un elemento con la misma identificación en un documento HTML. En su caso, parece que tiene varias filas con la misma id . Entonces su función siempre elige la primera fila. Para cambiar su trabajo, puede usar un nombre de class común como solución alternativa para ocultar el contenido.
Aquí hay un ejemplo:
function myFunction() { var elements = document.getElementsByClassName('private-mode'); for (let element of elements) { if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } } <table class="table hoverTable"> <tr> <th></th> <th>Omschrijving</th> <th>Bedrijf</th> <th>Betaalmethode</th> <th>Bedrag</th> </tr> <tr> <th><input class="checkbox1" type="checkbox" /></th> <td>Sample</td> <td>Sample</td> <td>Sample</td> <td class="private-mode">Content 1</td> </tr> <tr> <th><input class="checkbox1" type="checkbox" /></th> <td>Sample</td> <td>Sample</td> <td>Sample</td> <td class="private-mode">Content 2</td> </tr> </table> <button onClick="myFunction()">Private mode</button>