时间戳

首页 > 解决方案 > 如何使点击可编辑

javascript - 如何使点击可编辑

问题描述

我正在做作业，但我不知道如何使表格行在单击时可编辑。例如，单击“John”我可以修改名称。下面的代码只是代码的一小部分，只是为了了解表是如何创建的。任何提示或解决方案表示赞赏。

在此处输入图像描述 

        // 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>

标签： javascripthtml

解决方案

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

两种可能的解决方案

  1. 您可以contentEditable在div. 这是一个如何工作的示例：

<table>
    <tr>
      <td>
        <div contenteditable>I'm editable</div>
       </td>
    </tr>
    <tr>
    <td>I'm not editable</td>
    </tr>
 </table>

  1. 您可以在单击时添加<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 团队的文章出来了，直言这个contentEditable功能很糟糕。

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

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

底线

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

推荐阅读