使用 HTML DOM 输出数组
问题
如何利用 html dom 技术将多行数据以数组的形式输出？
思路
可以通过访问 HTML DOM 元素的 innerText 属性来获取输入的值，并将其存储到数组中。
具体操作
保存数据：
当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。使用 HTML DOM 将其添加到列表中。
上传数据：
当点击“上传”按钮时，获取列表中所有的行元素。遍历每行，并从每个单元格中提取文本内容。将提取到的值存储到一个数组中。最后，在浏览器控制台输出该数组。
代码实现
| 姓名 | 年龄 |
|---|
登录后复制
// 保存document.getElementById("save").addEventListener("click", () => { let name = document.getElementById("name").value; let age = document.getElementById("age").value; let listHTML = ` ${name} ${age} `; document.getElementById("list").innerHTML += listHTML;});// 上传document.getElementById("upload").addEventListener("click", () => { let listElement = document.getElementById("list"); let lineElements = listElement.querySelectorAll("tr"); let result = []; lineElements.forEach((item) => { let tds = item.querySelectorAll("td"); if (tds.length) { let name = tds[0].innerText; let age = tds[1].innerText; result.push({ name, age }); } }); console.log(result);});
登录后复制
注意
在遍历行元素时，需要使用扩展运算符 […lineElements]，因为 lineElements 是类数组，不能直接用 forEach 遍历。在提取单元格中的文本内容时，需要过滤掉空白单元格，因为拼接 HTML 代码时可能会产生一些空白单元格。
以上就是如何使用 HTML DOM 技术将表格数据以数组形式输出？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808626.html
