如何将onclick事件侦听器添加到桌子上？

Question

我目前正在尝试添加一个功能，当我在表中单击用户的名称时，它将显示该用户发表的所有帖子，但是我完全陷入困境。帖子的URL为 https://jsonplaceholder.typicode.com/posts

我目前有桌子设置并将连接下面的表格和代码的图像。

这是我试图

使用 jquery js js js js y y https://jquery.com/“ https://jquery.com/”将在表中显示每个用户。当用户在表中选择用户时，它将显示由该用户创建的所有“帖子”。

​

​“ data.json”>

Answer 1

利用 与代码> 和 分别属性 htmlelement.dataset 对应物。

document
  .querySelector('tbody')
  .addEventListener('click', ({ target }) => {

    const currentRow = target.closest('tr');
    const userId = currentRow.dataset.id;

    console.clear();
    console.log('userId: ', userId);
  });

body {
  margin: 0 0 0 2px;
}
table {
  border-collapse: collapse;
}
thead th {
  color: #fff;
  font-weight: bolder;
  background-color: #009577;
}
th, td {
  padding: 4px 10px 6px 10px;
  color: #0a0a0a;
}
tbody tr:nth-child(even) {
  background-color: #eee;
}
tbody tr:hover {
  outline: 2px dotted orange;
}
tbody tr {
  cursor: pointer;
}



tbody tr:nth-child(even) { background-color: #eee; }
tbody tr:hover { outline: 2px dotted orange; }

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id='1'>
      <td>1</td>
      <td>Leanne Graham</td>
      <td>Bret</td>
      <td>[email protected]</td>
    </tr>
    <tr data-id='2'>
      <td>2</td>
      <td>Ervin Howell</td>
      <td>Antonette</td>
      <td>[email protected]</td>
    </tr>
    <tr data-id='3'>
      <td>3</td>
      <td>Clementine Bauch</td>
      <td>Samantha</td>
      <td>[email protected]</td>
    </tr>
    <tr data-id='4'>
      <td>4</td>
      <td>Patricia Lebsack</td>
      <td>Karianne</td>
      <td>[email protected]</td>
    </tr>
    <tr data-id='5'>
      <td>5</td>
      <td>Chelsey Dietrich</td>
      <td>Kamren</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

基于香草的类似于组件的方法的实现，该方法可通过 数据 - * 属性可能看起来像下一个提供的示例代码...

function emptyElementNode(node) {
  [...node.childNodes].forEach(child => child.remove());
}
function clearTableContent(root) {
  [
    ...root.querySelectorAll('thead'), 
    ...root.querySelectorAll('tbody'),

  ].forEach(child => child.remove());
}

function createTableHead(headerContentList) {
  const elmThead = document.createElement('thead');
  const elmTr = headerContentList
    .reduce((root, content) => {

      const elmTh = document.createElement('th');
      elmTh.textContent = content;

      root.appendChild(elmTh);

      return root;      
    }, document.createElement('tr'));
  
  elmThead.appendChild(elmTr);
  return elmThead;
}
function createTableBody(rowContentKeyList, userList) {
  return userList
    .reduce((elmTbody, userItem) => {

      const elmTr = rowContentKeyList
        .reduce((root, key) => {

          const elmTd = document.createElement('td');
          elmTd.textContent = userItem[key];

          root.appendChild(elmTd);

          return root;
        }, document.createElement('tr'));

      elmTr.dataset.id = userItem.id;
      elmTbody.appendChild(elmTr);

      return elmTbody;
    }, document.createElement('tbody'));
}
function createAndRenderPostItem(root, { title, body }) {
  const elmDt = document.createElement('dt');
  const elmDd = document.createElement('dd');

  elmDt.textContent = title;
  elmDd.textContent = body;

  root.appendChild(elmDt);
  root.appendChild(elmDd);

  return root;
}

function updateSelectedStates(selectedRow) {
  [...selectedRow.parentNode.children]
    .forEach(rowNode =>
      rowNode.classList.remove('selected')
    );
  selectedRow.classList.add('selected');
}

function handleUserPostsRequestFromBoundData({ target }) {
  const { postsRoot, requestUrl, placeholder } = this;

  const currentRow = target.closest('tr');
  const userId = currentRow?.dataset?.id;

  if (userId) {
    createListOfUserPosts({
      postsRoot,
      url: requestUrl.replace(placeholder, userId)
    });
    updateSelectedStates(currentRow);
  }
}

async function createListOfUserPosts({ postsRoot, url }) {
  emptyElementNode(postsRoot);

  if (postsRoot && url) {
    const response = await fetch(url);
    const postList = await response.json();

    postList.reduce(createAndRenderPostItem, postsRoot);
  }
}
async function createListOfUsers({ usersRoot, postsRoot }) {
  const usersRequestUrl = usersRoot.dataset.request;

  const userPostsRequestUrl = postsRoot.dataset.request;
  const userPostsPlaceholder = postsRoot.dataset.placeholder;

  const response = await fetch(usersRequestUrl);
  const userList = await response.json();

  if (userList.length >= 1) {
    const displayConfig = JSON.parse(
      usersRoot.dataset.display ?? '{}'
    );
    const headerContentList = Object.values(displayConfig);
    const rowContentKeyList = Object.keys(displayConfig);

    emptyElementNode(postsRoot);
    clearTableContent(usersRoot);

    usersRoot.appendChild(
      createTableHead(headerContentList)
    );
    usersRoot.appendChild(
      createTableBody(rowContentKeyList, userList)
    );
    usersRoot.addEventListener(
      'click',
      handleUserPostsRequestFromBoundData
        .bind({
          postsRoot,
          requestUrl: userPostsRequestUrl,
          placeholder: userPostsPlaceholder,
        })
    );
  }  
}

function initializeUserPostsComponent(root) {
  const usersRoot = root.querySelector('[data-users]');
  const postsRoot = root.querySelector('[data-posts]');

  createListOfUsers({ usersRoot, postsRoot });
}
document
  .querySelectorAll('[data-user-posts]')
  .forEach(initializeUserPostsComponent);

body { margin: 0 0 0 2px; font-size: .8em; }
table { border-collapse: collapse; }
table caption { text-align: left; padding: 3px; }
thead th { color: #fff; font-weight: bolder; background-color: #009577; }
th, td { padding: 3px 5px; color: #0a0a0a; }
tbody tr:nth-child(even) { background-color: #eee; }
tbody tr:hover { outline: 2px dotted orange; }
tbody tr.selected { background-color: rgb(255 204 0 / 18%); }
tbody tr { cursor: pointer; }
[data-user-posts]::after { clear: both; display: inline-block; content: ''; }
.user-overview { float: left; width: 63%; }
.user-posts { float: right; width: 36%; }
.user-posts h3 { margin: 0; padding: 4px 8px; font-size: inherit; font-weight: normal; }

<article data-user-posts>
  <table 
    data-users
    data-request="https://jsonplaceholder.typicode.com/users"
    data-display='{"id":"Id","name":"Name","username":"Username","email":"Email"}'
    class="user-overview"
  >
    <caption>Select a user to view posts</caption>
  </table>
  <div class="user-posts">
    <h3>Posts:</h3>
    <dl
      data-posts
      data-request="https://jsonplaceholder.typicode.com/users/:userId/posts"
      data-placeholder=":userId"
    >
    </dl>
  </div>
<article>