个人中心
gpt4 book ai didi

javascript - 如何给自动生成的元素添加onclick事件

转载 作者：行者123 更新时间：2023-12-02 22:21:32 25 4
gpt4 key购买 nike

我正在尝试使用通过获取获取的元素动态生成一个表格，我可以与用户一起绘制表格，但我想向每一行添加一个 onclick 函数，以便每当我单击我获得附加到该用户的书籍的行(从数据库获取)，无论如何，我的问题是如何在每次生成 tr 时向每个 tr 添加一个函数，以便当我单击 tr 时我调用一个函数。我尝试在每个 tr 的 drawUsersTable 函数 上添加一个事件监听器，但它似乎不起作用。

这是代码:


  <body>
    <script>
      async function getToken() {
        const response = await fetch("http://localhost:3000/auth", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            user: "jesus",
            password: "1234"
          })
        });
        const { token } = await response.json(); //esta linea no se ejecutara hasta que response este resuelta
        localStorage.setItem("token", token);
      }

      async function printUsers() {
        const token = localStorage.getItem("token");
        const response = await fetch("http://localhost:3000/users", {
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json"
          }
        });
        const users = await response.json();
        drawUsersTable(users);
      }

      const drawUsersTable = users => {
        cont = 1;
        const table = document.getElementById("table");
        users.forEach(({ user_id, username, isAdmin }) => {
          
          const firstTD = document.createElement("td");          
          const secondTD = document.createElement("td");
          const thirdTD = document.createElement("td");

          firstTD.innerText = user_id;
          secondTD.innerText = username;
          thirdTD.innerText = isAdmin;

          const tr = document.createElement("tr");
          tr.setAttribute("id", "user_id" + cont);
          tr.addEventListener("click", printBooks(user_id));
          cont = cont + 1;
          tr.append(firstTD, secondTD, thirdTD);
          table.append(tr);
        });
      };
      getToken().then(() => printUsers());

      async function printBooks(userId) {    
        const token = localStorage.getItem("token");        
        const response = await fetch("http://localhost:3000/bookUser/:userId/books", {
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json"
          }
        });
        const books = await response.json();
        console.log(books);
      }


    </script>

    <table id="table">
      <tr>
        <td class="id">ID</td>
        <td>Username</td>
      </tr>
    </table>

我尝试了这个，但它不起作用，它不是将 onclick 方法添加到每一行，而是打印出屏幕上的所有代码......有任何提示吗？

const drawUsersTable = users => {
        cont = 1;
        const table = document.getElementById("table");
        users.forEach(({ user_id, username, isAdmin }) => {
          const firstTD = document.createElement("td");
          const secondTD = document.createElement("td");
          const thirdTD = document.createElement("td");

          firstTD.innerText = user_id;
          secondTD.innerText = username;
          thirdTD.innerText = isAdmin;

          const tr = document.createElement("tr");
          tr.setAttribute("id", "user_id" + cont);
          tr.onclick =  function(user_id){
            const token = localStorage.getItem("token");
            const response =  fetch("http://localhost:3000/bookUser/:userId/books", {
              headers: {
               Authorization: `Bearer ${token}`,
              "Content-Type": "application/json"
              }
            });
            const books =  response.json();
            console.log(books);
          }

最佳答案

你在哪里

const tr = document.createElement("tr");

可以不加吗:

tr.onclick = function() { alert('magic'); };

关于javascript - 如何给自动生成的元素添加onclick事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59214123/

25 4 0
文章推荐： javascript - 在 JSON.parse 中使用变量
文章推荐： opengl - CAD中的C2面是什么，C2是什么意思？
文章推荐： asp.net - 获取连接到服务器的在线用户的名称
文章推荐： javascript - JQuery查找并更新子元素的属性然后返回父元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com