时间戳

首页 > 解决方案 > 如何编辑tbody上的所有td

javascript - 如何编辑tbody上的所有td

问题描述

所以我想做的是在我的代码中添加“更改”功能，它仅适用于第一个 td，但不适用于其他任何 td，当我单击另一个 td 时，它会自动编辑第一个。有谁知道为什么我的代码只更改 td>name/td> 而不是 td>adress/td> 或任何其他 td>

html:

 <form id="registrering">
    <label>Navn: <input id="inpnavn" placeholder="Raahim Khan" type="text" required></label>
    <label>Adresse: <input id="inpadresse" type="text" placeholder="Adresse 12" required></label>
    <label>Mobilnummer: <input id="inpmobilnummer" placeholder="12345678" required></select></label>
    <label>Kjønn: 
      <select id="inpkjønn" required>
        <option value="" selected disabled hidden>Velg kjønn</option>
        <option>Mann</option>
        <option>Kvinne</option>
        <option>intetkjønn</option>
      </select>
    </label>
    <button type="submit">Send inn</button>
 </form>

 //showing the data on website


    function hentruss(snapshot){
        var pk = snapshot.key;
        var nyruss = snapshot.val();
        var russref = database.ref("russ/" + nyruss.russ);
        russref.on("value", function(snapshotruss){
            var russobj = snapshotruss.val();
            txttabell.innerHTML += `
                <tr id="${pk}">
                    <td><label class="russlabel" onclick="edit('${pk}')">${nyruss.navn}</label><input type="text" class="editItem" style="display:none"></td>
                    <td><label class="russlabel" onclick="edit('${pk}')">${nyruss.adresse}</label><input type="text" class="editItem" style="display:none"></td>
                    <td>${nyruss.mobilnummer}</td>
                    <td>${nyruss.kjønn}</td>
                    <td><label class="delete" onclick="slett('${pk}')"><button>Slett</button></label></td>
                </tr>
            `;

        });
    }

//通过单击元素更新名称、地址等。

      function edit(pk) {
        var russen = russ.child(pk);


        var label = document.querySelector(`#${pk} .russlabel`);
        label.style.display = "none";
        var tekst = label.innerText;

        var inputfelt = document.querySelector(`#${pk} .editItem`);
        inputfelt.style.display = "block";
        inputfelt.value = tekst;
        inputfelt.focus();

        inputfelt.onblur = function() {
            inputfelt.style.display = "none";
            label.style.display = "block";
        };

        inputfelt.onchange = function() {
            russen.update(  {tekst: inputfelt.value}  )
            inputfelt.style.display = "none";
            label.style.display = "block"; 
            label.innerText = inputfelt.value;
        };

    }

标签： javascripthtmlfirebase

解决方案

给出一个确切的解决方案有点困难，因为您共享的代码片段有很多上下文不清楚的函数调用。我已尽力说明如何做你想做的事情。也许这个将有助于朝着正确的方向开始：

function handleSubmit(form) {
  // Simulate creation of item using a form
  var name = form.name.value;
  var mobile = form.mobile.value;
  // Generate random pk for demonstration
  var pk = `pk${+new Date()}`;
  var tableBody = document.querySelector('table tbody');
  tableBody.innerHTML += ` <tr>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="name">${name}</label>
        <input class="editItem" style="display:none;" />
      </td>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="mobile">${mobile}</label>
        <input class="editItem" style="display:none;" />
      </td>
    </tr>`;

  return false;
}

function edit(label) {
  var pk = label.dataset.pk;
  var field = label.dataset.field;
  var input = label.parentElement.children[1]; // Use label.parent.querySelector('input') if DOM is more complex
  label.style = 'display:none;';
  input.style = 'disply:block;';
  input.focus();
  input.value = label.innerHTML;
  input.onchange = function() {
    // pk and field are available here
    // to Update DB state?? not sure how this code works
    //var russen = russ.child(pk);
    //russen.update(  {tekst: inputfelt.value}  )
  }
  input.onblur = function() {
    label.innerHTML = input.value;
    label.style = 'display:block;';
    input.style = 'display:none;';
  }

}
td {
  padding: 0.5rem 0;
  border-bottom: 1px solid black;
}

form {
  margin: 1rem auto;
}
<form id="entry" onsubmit="return handleSubmit(this);">
  <input name="name" placeholder="Name" />
  <input name="mobile" placeholder="mobile" />
  <input type="submit" value="Add Entry" />
</form>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Mobile</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="name">Tom</label>
        <input class="editItem" style="display:none;" />
      </td>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="mobile">1234</label>
        <input class="editItem" style="display:none;" />
      </td>
    </tr>
  </tbody>
</table>

一些注意事项：

  1. 阅读/复习JS Events Here并重构内联事件处理程序可能是一个好主意 - 这些使您的代码难以维护、阅读、推理、调试，并且通常是一个坏主意。

  2. 内联样式也是如此 - 避免使用它们。尝试在样式表中使用具有支持样式的类。（例如，在单击标签时，我们可以向元素添加一个active类，该类又会自动隐藏标签并显示输入。td

  3. 每次单击标签时将侦听器重新分配给输入是不好的做法。通过使用事件委托之类的东西，可以以更简单、更优雅的方式处理相同的功能

推荐阅读