I want to go through all the rows in my table and if a row's first cell is equal to either 1 or 15, I want to hide the value in the sixth cell of that row. I'm having a problem with the i variable in thedocument.querySelector("tr:nth-child(i) td:nth-child(6)") because it seems like the variable is not being recognized. However, when I put an actual number inside the nth-child, it works, and it hides the corresponding row. But obviously I would need to use the i variable so that the cell that gets hidden is in the row whose first cell is either 1 or 15. Please see script below:
var ids = document.querySelectorAll("table tr td:nth-child(1)");
[].forEach.call(ids , function(cell, i) {
if(cell.innerHTML == 1 ){
document.querySelector("tr:nth-child(i) td:nth-child(6)").style.display = "none";
console.log("ito yung row in question: " + i);
}
if(cell.innerHTML == 15 ){
document.querySelector("tr:nth-child(i) td:nth-child(6)").style.display = "none";
console.log("ito yung row in question: " + i);
}
});
As user1599011 suggests, you are passing the i character in your query selector string rather than the value of your i variable. You could use a template literal like so:
var ids = document.querySelectorAll("table tr td:nth-child(1)");
[].forEach.call(ids , function(cell, i) {
if(cell.innerHTML == 1 ){
document.querySelector(`tr:nth-child(${i}) td:nth-child(6)`).style.display = "none";
console.log("ito yung row in question: " + i);
}
if(cell.innerHTML == 15 ){
document.querySelector(`tr:nth-child(${i}) td:nth-child(6)`).style.display = "none";
console.log("ito yung row in question: " + i);
}
});