I currently have a search bar which searches after text in a table. I have added a tooltip in the table which causes me some issues. The code for it looks like this:
<tr>
<td>Spain</td>
<td>Portugal</td>
<td>Turkey</td>
<td>Greece <span data-text="This is just a placeholder..."
class="tooltip"><i style="font-size: 20px; color: #556B2F" class="fa fa-info-circle" id="info-i"></i></span></td>
</tr>I have a script that searches for elements in the fields. The problem is that since I have the tooltip within a it also displays that line whenever I add text in the search bar that matches the code for the tooltip. Not only does it display a result at Greece, it also displays when I write "Span" since I have a within.
My JS:
function performSearch() {
var filter = searchBox.value.toUpperCase();
for (var rowI = 0; rowI < trs.length; rowI++) {
var tds = trs[rowI].getElementsByTagName("td");
trs[rowI].style.display = "none";
for (var cellI = 0; cellI < tds.length; cellI++) {
if (tds[cellI].innerHTML.toUpperCase().indexOf(filter) > -1)
{
myTable.style.display = "table";
trs[rowI].style.display = "";
continue;
}
}
}
if (searchBox.value === ''){
table.style.display='none';
}
else {
table.style.display='table';
}
} Is there a way for JS to not display other than the pure text in the resuls and not everything including code?