Question

我构建了电话簿应用程序，但是我的编辑按钮似乎不起作用。它应将行中的值返回到输入以进行编辑。标题中的Codepen。谢谢！

Answer 1

您在第39和40行中使用的是id而不是className。还要将“ hrIndex”更改为“ rowIndex”。

Answer 2

分叉它并给出了一个稍有不同的实现，请查看一下您的想法。我没有像您的示例那样遍历DOM，而是将click事件处理程序放在行上，因为它包含将被操纵的所有元素。单击行中的按钮时，它们会冒出气泡，并且该行基于具有类['edit'，'save'，'delete']的按钮来处理事件，用于编辑从文本到输入字段和保存的实际行更改按钮添加到该行，对于保存按钮，则相反。删除按钮只会删除该行。

function deleteRow(row) {
  let tbodyEl = document.querySelector('#entriesTable tbody');
  tbodyEl.removeChild(row);
}

function resaveRow(row) {
  let tds = row.querySelectorAll('td');
  let nameInp = tds[0].querySelector('input');
  let phoneInp = tds[1].querySelector('input');
  let name = nameInp.value;
  let phone = phoneInp.value;
  let saveBtn = tds[2].querySelector('.save');
  tds[0].removeChild(nameInp);
  tds[1].removeChild(phoneInp);
  tds[0].innerText = name;
  tds[1].innerText = phone;
  tds[2].removeChild(saveBtn);
};

function editRow(row) {
  let tds = row.querySelectorAll('td');
  let name = tds[0].innerText;
  let phone = tds[1].innerText;
  let nameInp = document.createElement('input');
  nameInp.value = name;
  let phoneInp = document.createElement('input');
  phoneInp.value = phone;
  let saveBtn = document.createElement('button');
  saveBtn.innerText = 'Save';
  saveBtn.classList.add('save');

  tds[0].innerHTML = "";
  tds[0].appendChild(nameInp);
  tds[1].innerHTML = "";
  tds[1].appendChild(phoneInp);
  tds[2].appendChild(saveBtn);
}

function rowHandler(e) {
  let clickedEl = e.target;
  if (clickedEl.classList.contains('edit')) {
    //this is the edit button handler
    editRow(this);
  }
  if (clickedEl.classList.contains('delete')) {
    //this is the delete handler
    deleteRow(this);
  }
  if (clickedEl.classList.contains('save')) {
    //this is the resave after editing handler
    resaveRow(this);
  }
}

function addContact(){
  let tbodyEl = document.querySelector('#entriesTable tbody');
  let nameEl = document.getElementById('insertName');
  let phoneEl = document.getElementById('insertPhone');
  let phone = phoneEl.value;
  let name = nameEl.value;

  if (name !== '' && phone !== '') {
    let row = document.createElement('tr');
    let nameTd = document.createElement('td');
    let phoneTd = document.createElement('td');
    let editTd = document.createElement('td');
    let deleteTd = document.createElement('td');
    let editBtn = document.createElement('button');
    let deleteBtn = document.createElement('button');
    editBtn.classList.add('edit');
    deleteBtn.classList.add('delete');
    editBtn.innerText = 'Edit';
    deleteBtn.innerText = 'Delete';
    nameTd.innerText = name;
    phoneTd.innerText = phone;
    editTd.appendChild(editBtn);
    deleteTd.appendChild(deleteBtn);
    row.appendChild(nameTd);
    row.appendChild(phoneTd);
    row.appendChild(editTd);
    row.appendChild(deleteTd);
    row.addEventListener('click', rowHandler);
    tbodyEl.appendChild(row);
    nameEl.value = '';
    phoneEl.value = '';
  }
}

document.getElementById('addContact').addEventListener('click', addContact);

叉笔：

https://codepen.io/anon/pen/djZwqm

DOM //将值返回到输入以进行编辑：https://codepen.io/iacob24/pen/BPmGaW

2 个答案: