There is a table which is loaded from a DB. I wanted to make a dropdown filter for each column, but it gives an error.
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Инвентаризация</title>
<script type = "text/javascript" src = "eel.js">
</script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box1">
<div class="buttons">
<button id="add">Добавить</button>
<button id="btn">Изменить</button>
<button id="delete">Удалить</button>
<button id="update">Обновить</button>
</div>
</div>
<input class="form-control" type="text" name="q" placeholder="Поиск по таблице" id="search-text" onkeyup="tableSearch()" >
<div class="box2">
<table id="table">
<tbody>
<th>№ п/п</th>
<th col-index = 1>Расположение
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 2>Наименование
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 3>Серийный номер
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 4>Инвентарный номер
<select class="table-filter">
<option value="all"></option>
</select>
</th>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
JS
document.querySelector("#delete").onclick = function(){
var unique_col_values_dict = {}
allFIlters = document.querySelectorAll(".table-filter")
allFIlters.forEach(filter_i => {
col_index = filter_i.parentElement.getAttribute("col-index");
const rows = document.querySelectorAll("#table > tbody > tr" )
rows.forEach((row) => {
cell_value = row.querySelector("td:nth-child("+col_index+")").innerHTML;
if (col_index in unique_col_values_dict) {
if (unique_col_values_dict[col_index].includes(cell_value)){
alert(cell_value +"is already present in array" + unique_col_values_dict[col_index])
} else {
unique_col_values_dict[col_index].push(cell_value)
alert("Array after adding the cell value " + unique_col_values_dict[col_index])
}
} else {
unique_col_values_dict[col_index] = new Array(cell_value)
}
});
});
for(i in unique_col_values_dict) {
alert("Column index : " + i + " has unique values : \n" + unique_col_values_dict[i]);
}
}
ERROR:
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
at main.js:13:74
at NodeList.forEach (<anonymous>)
at main.js:12:14
at NodeList.forEach (<anonymous>)
at document.querySelector.onclick (main.js:9:16)
And yet the rows in the table are created automatically and filled in the same place as the table headers (screen below), how can all this be fixed? table
I tried to launch the function on the button click, because I thought that the data didn't have time to load, but it didn't help
<div class="box2">
<table id="table">
<thead>
<th>№ п/п</th>
<th col-index = 1>Расположение
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 2>Наименование
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 3>Серийный номер
<select class="table-filter">
<option value="all"></option>
</select>
</th>
<th col-index = 4>Инвентарный номер
<select class="table-filter">
<option value="all"></option>
</select>
</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="main.js"></script>
function showData(){
results();
getData();
const [id, rasp, name, sn, inv] = [0, 1, 2, 3, 4]
var tbl = document.getElementById('table')**.getElementsByTagName('tbody')[0]**;
for(i = 0; i<arr.length; i++) {
var r = tbl.insertRow();
var cell1 = r.insertCell();
var cell2 = r.insertCell();
var cell3 = r.insertCell();
var cell4 = r.insertCell();
var cell5 = r.insertCell();
cell1.innerHTML = arr[i][id];
cell2.innerHTML = arr[i][rasp];
cell3.innerHTML = arr[i][name];
cell4.innerHTML = arr[i][sn];
cell5.innerHTML = arr[i][inv];
}
}
document.querySelector("#delete").onclick = function(){
var unique_col_values_dict = {}
allFIlters = document.querySelectorAll(".table-filter")
allFIlters.forEach(filter_i => {
col_index = filter_i.parentElement.getAttribute("col-index");
const rows = document.querySelectorAll("#table > tbody > tr" )
rows.forEach((row) => {
cell_value = row.querySelector("td:nth-child("+col_index+")").innerHTML;
if (col_index in unique_col_values_dict) {
if (unique_col_values_dict[col_index].includes(cell_value)){
alert(cell_value +"is already present in array" + unique_col_values_dict[col_index])
} else {
unique_col_values_dict[col_index].push(cell_value)
alert("Array after adding the cell value " + unique_col_values_dict[col_index])
}
} else {
unique_col_values_dict[col_index] = new Array(cell_value)
}
});
});
for(i in unique_col_values_dict) {
alert("Column index : " + i + " has unique values : \n" + unique_col_values_dict[i]);
}
}