I created search bar to search all relevant keyword in this table. It will display the results of the row in the table that may contain the keyword including that hyperlink, it will display all the results including the hyperlink, ... I wrote the following JavaScript code, but it doesn't work, like below:
function myFunction() {
var input, filter, table, tr, td, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("mytable");
tr = table.getElementsByTagName("tr");
td = tr.getElementByTagName("td");
for (i = 0; i < td.length; i++) {
a = td[i].getElementsByTagName("a")[0];
if (a) {
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
td[i].style.display = "";
} else {
td[i].style.display = "none";
}
}
}
}<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table class="table table-striped" id="mytable">
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">google lnk</th>
<th scope="col">Random number</th>
<th scope="col">Software</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href=https://google.com>Google</a></td>
<td>4</td>
<td><a><b>1</b></a></td>
</tr>
<tr>
<td>2</td>
<td><a href=bing.com>bing</a></td>
<td>6</td>
<td>
<a href="facebook.com">facebook</a>,
<a href="duckduckgo.com">duckduckgo</a>,
<a href="nvdia.com/">nvdia</a>
</td>
</tr>
</tbody>
</table>How do I write the code? P/s : sorry for my bad English
hope this works for you:
const allDataInRows = [];
const AllTRows = document.querySelectorAll("tbody tr");
AllTRows.forEach(tr => allDataInRows.push(tr.innerText));
const tableBoby = document.querySelector("tbody");
const originalData = tableBoby.innerHTML;
function myFunction(el) {
if (!el.value) {
tableBoby.innerHTML = originalData;
return;
}
tableBoby.innerHTML = "";
allDataInRows.forEach((adir, i) => {
if (adir.toLowerCase().includes(el.value.toLowerCase())) {
tableBoby.innerHTML += `<tr>${AllTRows[i].innerHTML}</tr>`;
}
})
}<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">
<table id="mytable" border>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">google lnk</th>
<th scope="col">Random number</th>
<th scope="col">Software</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href=https://google.com>Google</a></td>
<td>4</td>
<td><a><b>1</b></a></td>
</tr>
<tr>
<td>2</td>
<td><a href=bing.com>bing</a></td>
<td>6</td>
<td>
<a href="facebook.com">facebook</a>,
<a href="duckduckgo.com">duckduckgo</a>,
<a href="nvdia.com/">nvdia</a>
</td>
</tr>
</tbody>
</table>