通过html dom输出数组
在本例中，我们需要获取一个列表中所有行的姓名和年龄，并以数组形式输出。要使用HTML DOM实现这一点，遵循以下步骤：
获取保存按钮和上传按钮：
const saveBtn = document.getElementById("save");const uploadBtn = document.getElementById("upload");
登录后复制
监听保存按钮事件：
saveBtn.addEventListener("click", () => { // 获取姓名和年龄输入字段中的值 const name = document.getElementById("name").value; const age = document.getElementById("age").value; // 创建一个列表项HTML字符串 const listHTML = ` ${name} ${age} `; // 追加列表项到列表中 document.getElementById("list").innerHTML += listHTML;});
登录后复制
监听上传按钮事件：
立即学习“前端免费学习笔记（深入）”；
uploadBtn.addEventListener("click", () => { // 获取列表中的所有行 const lineElements = document.querySelectorAll("#list tr"); // 创建一个数组来存储结果 const result = []; // 遍历每一行，提取姓名和年龄，并将其添加到数组中 [...lineElements].forEach((item) => { const tds = item.querySelectorAll("td"); if (tds.length) { const name = tds[0].innerText; const age = tds[1].innerText; result.push({ name, age }); } }); // 打印数组内容 console.log(result);});
登录后复制
通过监听按钮事件并使用HTML DOM操作，我们可以动态构建列表并以数组形式获取其数据。
以上就是如何使用HTML DOM输出列表中所有行的姓名和年龄？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808606.html
