登录
首页 >  文章 >  前端

如何使用HTML DOM输出列表中所有行的姓名和年龄?

时间:2024-11-05 21:31:08 329浏览 收藏

文章不知道大家是否熟悉?今天我将给大家介绍《如何使用HTML DOM输出列表中所有行的姓名和年龄? 》,这篇文章主要会讲到等等知识点,如果你在看完本篇文章后,有更好的建议或者发现哪里有问题,希望大家都能积极评论指出,谢谢!希望我们能一起加油进步!

如何使用HTML DOM输出列表中所有行的姓名和年龄?

通过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 = `
        <tr>
          <td>${name}</td>
          <td>${age}</td>
        </tr>
      `;
    
      // 追加列表项到列表中
      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输出列表中所有行的姓名和年龄? 》的详细内容,更多关于的资料请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>