javascript - 如何使 <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);
        tr.appendChild(btnDelete);
        tableBody.appendChild(tr);
        let divShow = document.getElementById('content');
        divShow.style.display = 'block'; // display table
        clearForm(); // Clear Form Inputs

    <div id="content" style = 'display:none;'>
        <div id="results">
            <table id = 'table' class = 'dnone'>
                <tr>
                    <td>#</td>
                    <td>Candidate ID</td>
                    <td>Preview Candidate</td>
                    <td>Candidate Name</td>
                    <td>Candidate Surname</td>
                    <td>Candidate Age</td>
                    <td>Candidate Position</td>
                    <td>Candidate Years of Exp.</td>
                    <td>Candidate Education</td>
                    <td>Candidate Status</td>
                    <td>Candidate Note</td>
                    <td>Delete Record</td>
                </tr>
                <tbody>
                </tbody>
            </table>
            <button id = 'btnDeleteAll'>Delete All</button>
        </div>
    </div>

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并不像乍一看那样完全可靠。文章来自Medium Engineering团队以及 CKEditor team出来直言contentEditable功能很糟糕。

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

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

---

底线

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