When trying to create a table that has a search bar in a XML dashboard, why is my input is not accepted and JavaScript not working?
I have a simple XML dashboard of list of dashboards. I'm trying to create a table that has a search bar. The tag input seems to be rejected as a violation. However, i tried to close the tag as the violation went away, but my JavaScript function is not doing the job. i tested outside Splunk and in the HTML mode of the same dashboard and it runs perfectly fine. Please find the code below in the XML version. What is wrong!
function myFunction123() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1,0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<row>
<panel>
<html>
<style>
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
</style>
<body>
<button class="accordion" style="margin-left: -0.00px"> Voice Dashboards </button>
<div class="panel ">
<input onkeyup="myFunction123()" id="myInput" placeholder="Search for your dashboard's Name or Category" title="Type in a name"></input>
<table id="myTable">
<tr class="header">
<th style="width:60%; color: white; background-color: #1A5276;">Name</th>
<th style="width:40%; color: white; background-color: #1A5276;">Category</th>
</tr>
<tr>
<td><a href="">ENS ICONF STATUS</a></td>
<td>Iconf</td>
</tr>
<tr>
<td><a href="">IConf_Drilldown</a></td>
<td>Iconf</td>
</tr>
</table>
</body>
</html>
</panel>
</row>
