I am facing an issue with a jQuery filter function, and the error message it's showing is:
Cannot read property 'getElementById' of undefined
function CheckFilter() {
var input, filter, table, tr, td, i, searchFilter;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
searchFilter = document.getElementById("filterSearch").value;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[searchFilter];
var productType = tr[i].getElementById("productType").value;
if (td) {
if (productType == $('#Products').prop("checked")) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Below is the HTML structure of my table and checkbox. The objective is to display rows based on the checked status of the checkbox in relation to the typeProduct field.
<div class="form-group">
<div class="col-sm-3">
<select id="filterSearch" class="form-control">
<option value="0">Code</option>
<option value="1">Description</option>
</select>
</div>
<div class="col-sm-7">
<input type="text" id="searchInput" placeholder="Search.." onkeyup="checkFilter();" class="form-control" />
</div>
</div>
<div class="modal-body">
<div class="table-overflow col-sm-12">
<table class="table table-responsive table-hover" id="dataTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Product)
{
<tr>
<td>@item.Code</td>
<td>@item.name</td>
<td align="right">
<a href="#" onclick="closeModal();LoadProduct('@item.Code');" title="Select"><i class="fa fa-check-circle fa-lg"></i></a>
</td>
<td id="productType" value="@item.ProductType">@item.ProductType</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<input type="checkbox" asp-for="Products" onclick="checkProduct();" name="Products" id="Products"/>