HTML 表中的下拉过滤器出现问题

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 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我尝试在单击按钮时启动 function，因为我认为数据没有时间加载，但没有帮助

Answer 1

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

HTML 表中的下拉过滤器出现问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-12-06 07:45:19

HTML 表中的下拉过滤器出现问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-12-06 07:45:19

解决方案1
0 已采纳 2022-12-06 07:45:19