I have an HTML table where data is being displayed from the data table and where a function is being assigned with the use of an ID TAG that hides the <td> with the ID private-mode when you click on the button.
but the function only seems to work for the first row and not for the other rows I have checked the other rows with the inspect element function in chrome and they all have the ID private-mode
Can someone explain to me why its not working for the other rows?
Button:
<button onclick="privatemode()">Private mode</button>
html-table:
<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";
}
}
The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. In your case, you seem to have multiple rows with same id. So your function always picks the first row. To change your working, you can use a common class name as a workaround to hide the content.
Here's an example:
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>