Hello I'm very close to finish my demo site but somehow I can't get this simple piece to work.
Why the hell does the td return undefined when everything else is running fine?
function find() {
var input, filter, table, tr, td, i, txtValue;
//input = document.getElementById("search");
//filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
console.log(tr, ("tr"));
console.log(tr.length, ("trL"));
for (i = 0; i < tr.length; i++) {
console.log(tr[i], ("trI"));
td = tr[i].getElementsByTagName("td")[0];
console.log(td, ("td")); //UNDEFINED?????
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}<button onclick="find()">Find</button>
<table border="1" cellspacing="0" cellpadding="5" id="table" style="width: 50%;">
<thead>
<tr>
<th>Thema</th>
<th>Typ</th>
<th>Beschreibung</th>
<th>Kontext</th>
<th>SVG</th>
<th>AI</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt mit Gleichtrom Symbol oben</td>
<td>Elektronik</td>
<td><img src="1.svg"></td>
<td>1.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt mit Gleichtrom Symbol unten</td>
<td>Elektronik</td>
<td><img src="2.svg"></td>
<td>2.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt Standard</td>
<td>Elektronik</td>
<td><img src="3.svg"></td>
<td>3.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog Gleichstrom</td>
<td>Elektronik</td>
<td><img src="4.svg"></td>
<td>4.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="5.svg"></td>
<td>5.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="6.svg"></td>
<td>6.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="7.svg"></td>
<td>7.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Auge</td>
<td>Misc</td>
<td><img src="8.svg"></td>
<td>8.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Bad Smile</td>
<td>Misc</td>
<td><img src="9.svg"></td>
<td>9.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Bidirektional</td>
<td>Misc</td>
<td><img src="10.svg"></td>
<td>10.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Web-IO</td>
<td>Wiesemann und Theis</td>
<td><img src="11.svg"></td>
<td>11.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>USB-Server</td>
<td>Wiesemann und Theis</td>
<td><img src="12.svg"></td>
<td>12.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>COM-Server</td>
<td>Wiesemann und Theis</td>
<td><img src="13.svg"></td>
<td>13.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Microwall</td>
<td>Wiesemann und Theis</td>
<td><img src="14.svg"></td>
<td>14.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Web-Thermometer</td>
<td>Elektronik</td>
<td><img src="15.svg"></td>
<td>15.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Software</td>
<td>Browser</td>
<td>Misc</td>
<td><img src="16.svg"></td>
<td>16.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Computer / User der auf eine Webseite zugreift</td>
<td>Computer und Server</td>
<td><img src="17.svg"></td>
<td>17.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Computer / User</td>
<td>Computer und Server</td>
<td><img src="18.svg"></td>
<td>18.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Server mit Attributionsicon für z.B PHP, SQL</td>
<td>Computer und Server</td>
<td><img src="19.svg"></td>
<td>19.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Datenbank</td>
<td>Computer und Server</td>
<td><img src="20.svg"></td>
<td>20.ai</td>
</tr>
</tbody>
</table>You need to iterate the td elements as well.
function find() {
var filter = document.getElementById("search").value.toUpperCase(),
tr = document.getElementById("table").getElementsByTagName("tr"),
td,
i, j,
txtValue;
if (!filter) { // no filter
for (i = 1; i < tr.length; i++) tr[i].style.display = ""; // show all
return;
}
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
tr[i].style.display = "none"; // move this here for a start value
for (j = 0; j < td.length; j++) {
txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
}
}
}<input type="text" id="search"><button onclick="find()">find</button>
<table border="1" cellspacing="0" cellpadding="5" id="table" style="width: 50%;">
<thead>
<tr>
<th>Thema</th>
<th>Typ</th>
<th>Beschreibung</th>
<th>Kontext</th>
<th>SVG</th>
<th>AI</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt mit Gleichtrom Symbol oben</td>
<td>Elektronik</td>
<td><img src="1.svg"></td>
<td>1.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt mit Gleichtrom Symbol unten</td>
<td>Elektronik</td>
<td><img src="2.svg"></td>
<td>2.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>230 Volt Standard</td>
<td>Elektronik</td>
<td><img src="3.svg"></td>
<td>3.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog Gleichstrom</td>
<td>Elektronik</td>
<td><img src="4.svg"></td>
<td>4.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="5.svg"></td>
<td>5.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="6.svg"></td>
<td>6.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Analog</td>
<td>Elektronik</td>
<td><img src="7.svg"></td>
<td>7.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Auge</td>
<td>Misc</td>
<td><img src="8.svg"></td>
<td>8.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Bad Smile</td>
<td>Misc</td>
<td><img src="9.svg"></td>
<td>9.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Attribut</td>
<td>Bidirektional</td>
<td>Misc</td>
<td><img src="10.svg"></td>
<td>10.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Web-IO</td>
<td>Wiesemann und Theis</td>
<td><img src="11.svg"></td>
<td>11.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>USB-Server</td>
<td>Wiesemann und Theis</td>
<td><img src="12.svg"></td>
<td>12.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>COM-Server</td>
<td>Wiesemann und Theis</td>
<td><img src="13.svg"></td>
<td>13.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Microwall</td>
<td>Wiesemann und Theis</td>
<td><img src="14.svg"></td>
<td>14.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Objekt</td>
<td>Web-Thermometer</td>
<td>Elektronik</td>
<td><img src="15.svg"></td>
<td>15.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Software</td>
<td>Browser</td>
<td>Misc</td>
<td><img src="16.svg"></td>
<td>16.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Computer / User der auf eine Webseite zugreift</td>
<td>Computer und Server</td>
<td><img src="17.svg"></td>
<td>17.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Computer / User</td>
<td>Computer und Server</td>
<td><img src="18.svg"></td>
<td>18.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Server mit Attributionsicon für z.B PHP, SQL</td>
<td>Computer und Server</td>
<td><img src="19.svg"></td>
<td>19.ai</td>
</tr>
<tr>
<td>Gerätewelten</td>
<td>Hardware</td>
<td>Datenbank</td>
<td>Computer und Server</td>
<td><img src="20.svg"></td>
<td>20.ai</td>
</tr>
</tbody>
</table>