如何使 <td> 单击可编辑

Question

我正在做作业，但我不知道如何使表格行可以通过单击进行编辑。例如，单击“约翰”我可以修改名称。下面的代码只是一小部分代码，只是为了了解表是如何创建的。任何提示或解决方案表示赞赏。        // Creating Table and Display DATA        let tableBody = document.getElementsByTagName('tbody')[0];        let tr = document.createElement('tr');        let ShowID = document.createElement('td');        let ShowName = document.createElement('td');        let ShowSurname = document.createElement('td');        let ShowAge = document.createElement('td');        let ShowPosition = document.createElement('td');        let ShowYofExperience = document.createElement('td');        let ShowEducation = document.createElement('td');        let ShowStatus = document.createElement('td');        let ShowNote = document.createElement('td');        for(let i = 0; i < candidates.length; i++){            let currentCandidate = candidates[i];            ShowID.innerText = currentCandidate.id;            ShowName.innerText = currentCandidate.name;            ShowSurname.innerText = currentCandidate.surname;            ShowAge.innerText = currentCandidate.age;            ShowPosition.innerText = currentCandidate.position;            ShowYofExperience.innerText = currentCandidate.experience;            ShowEducation.innerText = currentCandidate.education;            ShowStatus.innerText = currentCandidate.status;            ShowNote.innerText = currentCandidate.note;        }        // Checkbox         let ShowCheck = document.createElement('input');        ShowCheck.type = 'checkbox'        ShowCheck.id = 'checked';        ShowCheck.value = 'true';        tr.appendChild(ShowCheck);        tr.appendChild(ShowID);        tr.appendChild(btnPreview);        tr.appendChild(ShowName);        tr.appendChild(ShowSurname);        tr.appendChild(ShowAge);        tr.appendChild(ShowPosition);        tr.appendChild(ShowYofExperience);        tr.appendChild(ShowEducation);        tr.appendChild(ShowStatus);        tr.appendChild(ShowNote);

Answer 1

有多种方法可以使其可编辑，具体来说，我将介绍两种方法，一种是使用属性contentEditable，第二种是渲染输入。

---

两种可能的解决方案

1. 您可以contentEditable在div. 以下是其工作原理的示例：

<table>

    <tr>

      <td>

        <div contenteditable>I'm editable</div>

       </td>

    </tr>

    <tr>

    <td>I'm not editable</td>

    </tr>

 </table>

您可以在单击时添加到，并在模糊时更改<input>为。<td><input>

我将分享一个代码示例，为了简单起见，我们不会使用它来渲染输入document.createElement，而是在每个 td 上使用它，您也可以每次都手动渲染输入。

function onTdClick() {

  document.querySelector('.my-span').style.display = 'none';

  document.querySelector('.my-input').style.display = 'block';

}

function onInputBlur() {

  document.querySelector('.my-span').style.display = 'block';

  document.querySelector('.my-input').style.display = 'none';

}

.my-input {

  display: none;

}

<table>

    <tr>

      <td>

        <span class="my-span" onclick="onTdClick()">I'm editable</span>

        <input type="text" class="my-input" onblur="onInputBlur()" />

       </td>

    </tr>

 </table>

选择哪种解决方案，contentEditable或者输入替换？

您可能想知道选择哪种解决方案，请记住以下几点：

1. 标准输入元素仅限于纯文本输入。使用该contentEditable属性允许用户编写包含格式、表格、图像等的内容。

2. 使用contentEditable并不像乍一看那样完全可靠。

话虽如此，值得注意的是，他们正在构建极其复杂的所见即所得编辑器，其中包括许多复杂的功能，他们在该功能上遇到的很多问题是在使用更复杂的功能而不是非常简单的功能时contentEditable。

然而，即使是“更简单”的功能，在使用时也应该注意很多事情contentEditable，这就是为什么很多人建议在大多数情况下不要使用它。

---

底线

除非您需要用户编辑内容，否则请使用输入/文本区域解决方案。做起来要容易得多，因为contentEditable很快就会变得复杂。