How to make <td> on click to be editable

user_14757959 0
Viewed 180

I'm working on my homework and I can't figure out how can I make the table row to be editable on a click. For example, on click 'John' I can modify the name. The code below is just a small part of the code, just to get a clue of how the table is created. Any hint or solution is appreciated.

enter image description here 

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

html javascript
1 Answers

There are multiple ways you can make it editable, specifically I'll touch on two ways, one is using the attribute contentEditable and the second one is rendering an input.

Two possible solutions

  1. You can use contentEditable attribute inside a div. Here's an example of how that works:

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

  1. You can Add <input> to <td> when it is clicked and change <input> to when it is blurred.

I'll share an example of the code, for simplicity sake we will not render the input using document.createElement but have it on each td, you can also do it and render the input manually every time.

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>

Which solution to choose, contentEditable or input replacement?

You might be wondering which solution to choose, here are few things to keep in mind:

  1. A standard input element is limited to plain text input. using the contentEditable attribute allows users to write content that can include formatting, tables, images, etc.

  2. Using contentEditable isn't as full-proof as it might look on a first glance. Articles from the Medium Engineering team and also the CKEditor team came out and bluntly said that the contentEditable feature is terrible.

With that being said it's important to note that they are building extremely complex WYSIWYG editors that include a lot of complicated features, a lot of the problems they're experiencing with the contentEditable feature is when working with more complicated features and not very simple ones.

However there are many things ones should be aware of when using contentEditable even with 'simpler' features, this is why a lot of people recommend not using it in most cases.

Bottom Line

Unless you need the user to edit content, use the input/textarea solution. It's much easier to do as contentEditable gets complicated pretty quickly.

user_123065170
Related