I'm trying to make a table filter in JS. I think it's pretty much ok but I get this error:
row[i].getElementById is not a function
I can't understand why this is happening.
ps:added some of the html so you can see why I searched (getElementsByTagName("row")) The code is too long to put in here so I'm just adding my try in here you can see it all in the Pen.Thank you.
https://codepen.io/Slemook000/pen/NWMqQGB
function Search() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var row = table.getElementsByTagName("row");
console.log(row)
for (i = 0; i < row.length; i++) {
var div = row[i].getElementById("search")[0];
if (div) {
var txtValue = div.textContent || div.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
row[i].style.display = "";
} else {
row[i].style.display = "none";
}
}
}
}
<div class="grid-x">
<div id="myTable">
<script>
var myArray = [
{
"ID":7978,
"Name":"Institutional opening",
},
"Room":"Auditorium WINE2WINE - Palaexpo Piano -1",
"Categories":[
{
"Id":5782,
"Name":"Eventi in fiera"
},
{
"Id":7973,
"Name":"wine2wine"
}
],
"Organizers":[
],
"Speakers":[
{
"Key":"c1997773-c7ba-4d51-9f58-ac2b388aabf8",
"Name":"Federico Bricolo",
"Image":null,
"Description":{
}
},
{
"Key":"522937b6-237e-4929-80dd-858719022052",
"Name":"Maurizio Danese",
"Image":null,
"Description":{
}
}
],
"Partners":[
],
"Url":"https://liveshop.vinitaly.com/eventi/institutional-opening/",
"UpdateDate":"07/08/2022 15:49:48"
},
]
</script>
<script type="text/javascript">
buildTable(myArray)
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++) {
// Riga attuale
let row = data[i];
// Inizio template
let template_row = '';
// Creo le colonne
template_row += `<row class="row event filterDiv content">
<a href="${row.Url}">
<div class="columns small-2 ico">
<img class="focus" src="${row.Image}"/>
</div> `;
template_row += `
<div class="columns small-2 ico">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
`;
// Aggiungo una colonna per ogni speaker
row.Speakers.forEach(speaker => {
template_row +=
` <div class="swiper-slide">
<img class="focus" src="${speaker.Image}">
</div> `;
});
template_row +=`
</div></div></div>
<div class="columns small-8 info" id="search">
<p class="title release-date p2" id="p2"> ${row.StartDate}</p><br><h3 class="room">${row.Room}</h3><br><h2 class="title">${row.Name}</h2>
</div></div></div> ` ;
// Fine template
template_row += ` `;
table.innerHTML += template_row
const div = document.getElementById("myTable");
const nodes = div.getElementsByTagName("p");
if(document.getElementById("p2").classList.contains("title")){
var p2 = document.getElementById("p2").innerText;
var c = row.StartDate;
console.log(c)
var c_pos = c.indexOf("07");
var element = div.getElementsByTagName("row");
if (c_pos > -1) {
element[i].className += ' cars';
}
if(c_pos <= -1){
console.log(element)
element[i].className += ' animals';
}
}
}
}
</script>