0

我有一个简单的表，在该表中，每一行都添加（使用 innerHTML）来自本地存储的数据。每行包含一个编辑按钮。当我用类名查询SelectAll 编辑按钮时，它返回没有意义的空值。

在这里，Total_Users是存储的对象数组，每个对象传递给addToUserList()应用包含按钮的 innerHTML。加载文档后，会显示数据，但 querySelectorAll 在搜索“editButt”时返回 null。由于数据是在 DOM 中呈现的，所以几个按钮应该是我没有得到的结果......

// DOM
class Show {
    static addToUserList(user) {

        let list = document.querySelector('#table-body'); //just a table
        let row = document.createElement('tr');
        row.innerHTML = `<td>${user.name}</td>
        <td>${user.email}</td>
        <td>${user.phone}</td>
        <td>${user.role}</td>
        <td class="text-center mx-auto"> <i class="fa fa-edit text-success btn editButt" data-bs-toggle="modal" data-bs-target="#edit"></i> </td>`;
        list.appendChild(row);
    }
}

//Fill with previously stored data
document.addEventListener('DOMContentLoaded', Load_Users);

function Load_Users() {
    let Total_Users;
    if (localStorage.getItem('Total_Users') === null) {
        Total_Users = [];
    } else {
        Total_Users = JSON.parse(localStorage.getItem('Total_Users'));
    }
    Total_Users.forEach(item => {
        Show.addToUserList(item);
    })
}

// querySelector editButt
// find nothing here
let editElem = document.querySelectorAll('.editButt');
console.log(editElem);
4

3 回答 3

1

您可以尝试先选择“#table-body”，然后使用 querySelectorAll() 搜索表格元素。尝试以下方式：

let container = document.querySelector('#table-body');
let editElem = document.querySelectorAll('.editButt');

如果这不起作用，请尝试使用老式的 getElementsByClassName 选择器，我之前在 querySelectorAll() 上遇到过这个问题，最后我使用了这样的东西：

var editElem = document.getElementsByClassName('editButt');

如果这些都不适合您，我建议为您尝试选择的任何元素添加一个 id。这样您就知道您正在选择该特定元素。

文档.querySelectorAll() | MDN 网络文档

document.getElementsByClassName() | MDN 网络文档

于 2021-09-16T20:44:15.317 回答
1

您需要检查事件“DOMContentLoaded”是否准备就绪，例如：

if (document.readyState === "complete" || document.readyState === "loaded") {
    // document is already ready to go
    // your query selector here: 
    let editElem = document.querySelectorAll('.editButt');
    console.log(editElem);
}

在此处详细检查此问题的答案：

如何检测 DOMContentLoaded 是否被触发

于 2021-09-16T21:25:53.667 回答
0

在 load_Users() 函数中，querySelector 可以正常工作：

function Load_Users(){
   ....
   editElements();
   deleteElements();
}

function editElements(){
   let editElem = document.querySelectorAll('.editButt');
   console.log(editElem.length);
   ...
}
于 2021-09-16T22:21:02.313 回答