时间戳

首页 > 解决方案 > 使用 JavaScript 定位和更新表中的特定元素

javascript - 使用 JavaScript 定位和更新表中的特定元素

问题描述

我有一个任务是使用 HTML、CSS 和 JavaScript 构建一个简单的静态 CRUD 页面。我快完成了，但我一生都无法弄清楚如何使更新功能起作用。

这个想法是单击铅笔图标，然后重写该字段中的任何内容。但是，我无法弄清楚如何将该功能扩展到所有三个字段，它只适用于一个。

继承人页面。如果您单击“地籍-se”，它将用铅笔创建三个“td”，但只有一个有效（一个说“locado？”）。片段如下，但我使用了 localStorage，因此它无法正常运行。

感兴趣的函数位于页面底部，称为“updateItems()”。

我提前感谢您的帮助。

const createTd = item => {
  const Td = document.createElement("td");
  Td.innerHTML = item;
  return Td;
};

const createTdWithI = item => {
  const Td = document.createElement("td");
  const i = document.createElement("i");
  Td.innerHTML = item;
  Td.setAttribute("class", "tdEdit");
  Td.appendChild(i).setAttribute("class", "fas fa-edit");
  return Td;
}

const appendChildren = (parent, children) => {
  children.forEach(child => {
    parent.setAttribute("class", "tr");
    parent.appendChild(child);
  });
};

document.querySelector("#addClientBtn").addEventListener("click", () => {
  const clientName = document.querySelector("#name").value;
  const clientMovie = document.querySelector("#movie").value;
  const clientLocado = document.querySelector("#rentStatus").value;

  localStorage.setItem("clientName", clientName);
  localStorage.setItem("clientMovie", clientMovie);
  localStorage.setItem("clientLocado", clientLocado);

  const getTbody = document.querySelector("#tbody");
  const createTr = document.createElement("tr");
  const appendTr = getTbody.appendChild(createTr);

  const items = [
    createTdWithI(localStorage.getItem("clientName")),
    createTdWithI(localStorage.getItem("clientMovie")),
    createTdWithI(localStorage.getItem("clientLocado")),
    createTd('<i class="fas fa-trash"></i>')
  ];

  appendChildren(appendTr, items);
  
  deleteRow();
  updateItems();
});


// Deleta as linhas na tabela
function deleteRow() {
  let trashIcon = document.querySelectorAll(".fa-trash");
  trashIcon[trashIcon.length - 1].addEventListener("click", event => {
    trashIcon = event.target;
    trashIcon.parentNode.parentNode.parentNode.removeChild(trashIcon.parentNode.parentNode);
  });
}

function updateItems() {
  let editIcon = document.querySelectorAll(".fa-edit");
  // let targetText = document.querySelectorAll(".tdEdit");
  editIcon[editIcon.length - 1].addEventListener("click", event => {
    editIcon = event.target;
    editIcon.innerText = "test";

    // for (let i = 0; i < editIcon.length; i++) {
    //   editIcon.length = i;
    //   editIcon[i] = event.target;
    //   editIcon[i].innerText = "testLocado";
    // }


    // if (editIcon.length === editIcon.length - 1) {
    //   editIcon = event.target;
    //   editIcon.innerText = "testLocado";
    // } else if (editIcon.length === editIcon.length - 2) {
    //   editIcon = event.target;
    //   editIcon.parentNode.innerText = "testFilme";
    // } else if (editIcon.length === editIcon.length - 3) {
    //   editIcon = event.target;
    //   editIcon.parentNode.innetText = "testNome";
    // }
      
  });
}
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Renan Martineli de Paula" />
    <meta name="description" content="locadora de filmes Nova Singular processo seletivo desenvolvimento - sistema" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <!-- <link type="text/css" rel="stylesheet" href="reset.css" /> -->
    <link type="text/css" rel="stylesheet" href="styles.css" />
    <script src="sistema.js" defer></script>
    <title>Sistema</title>
  </head>
  <body>
    <h1>Bem vindo(a), <span id="userNameWelcome"></span>.

    <fieldset>
      <legend>Cadastrar cliente</legend>

      <label for="name">
        <p>Nome</p>
        <input type="text" id="name" required />
      </label>

      <label for="movie">
        <p>Filme</p>
        <input type="text" id="movie" required />
      </label>

      <br />

      <label for="rentStatus">
        <span>Locado?</span>
        <select name="locado" id="rentStatus" required>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>
      </label>

      <br />

      <button id="addClientBtn">Cadastrar</button>
    </fieldset>

    <input type="text" id="searchMenu" placeholder="Procure por clientes"/>

    <table id="clientTable">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Filme</th>
          <th>Locado?</th>
          <!-- <th>Modificar</th> -->
          <th>Deletar</th>
        </tr>
      </thead>
      <tbody id="tbody">
      </tbody>
    </table>
  </body>
  
  <script>
    // Mostra o nome do usuário na tela de boas vindas
    document.querySelector("#userNameWelcome").innerHTML = localStorage.getItem("userName");
  </script>
</html>

标签： javascripthtml

解决方案

尝试这个

function updateItems() {
let editIcon = document.querySelectorAll(".fa-edit");
// let targetText = document.querySelectorAll(".tdEdit");
for(let icon of editIcon){
icon.addEventListener('click', (event)=>{
editIcon = event.target;
editIcon.innerText = "test";
}, false);
}

推荐阅读