problem with dropdown filter in HTML table

Question

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

please include a reproduceable example, like including data in your table, if the issue is in the javascript, then include a working table — Moudi, Dec 01 '22 at 12:37
@Moudi i can't do that because the data is in the db and then it goes to python and then to js — Alex, Dec 01 '22 at 12:41
your html and JavaScript example do not show the problem - there are no or elements, perhaps you need to reorganise the code to attach listeners to your filter elements that react to selections instead of using a button click to try and run this... — A Macdonald, Dec 01 '22 at 12:41
@Alex I'm trying to increase your changes in finding help, however the example you posted doesn't highlight the issue. — Moudi, Dec 05 '22 at 13:50

score 0 · Accepted Answer · answered Dec 06 '22 at 07:45

<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]);
    }
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Dec 08 '22 at 13:34

problem with dropdown filter in HTML table

1 Answers1