CODEWITHSUNDEEP
javascripthtml-table
Karan Tewari
Karan Tewari

Reputation: 508

How to make editable rows efficiently?

I've a query, im using js to make a table tds editable. Im able to do this with individual methods on edit button .

I want to know what will be more efficient way to code this so that each edit onclick make that particular row only and in future if I increase table rows , it should be able to do it.

Right now im assigning id to the tr and targeting its row items , which is working but seems to be inefficient.

something like

var toBeEdited = document.getElementById('first-tr').getElementsByTagName('td');
  for (let i = 0; i < toBeEdited.length; i++) {
    toBeEdited[i].setAttribute('contenteditable', 'true');
  }

Here's the reference code for example

https://jsfiddle.net/karantewari/jyx2k7cv/3/

Thanks in advance :)

Upvotes: 2

Views: 138

Answers (2)

Karan
Karan

Reputation: 12629

Update onclick="makeEditable(this)" on element. Here this will be the current td element object.

Use one parameter with function as makeEditable = (td) => {...

And use var toBeEdited = td.parentElement.parentElement.getElementsByTagName('td'); for fetching respective tr childs.

makeEditable = (td) => {
  var toBeEdited = td.parentElement.parentElement.getElementsByTagName('td');
  for (let i = 0; i < toBeEdited.length; i++) {
    if (toBeEdited[i].getElementsByTagName('button').length == 0) {
      toBeEdited[i].setAttribute('contenteditable', 'true');
    }
  }
}
<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr id="first-tr">
      <td>Name</td>
      <td>Location 1</td>
      <td class="text-nowrap">
        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-first-tr" onclick="makeEditable(this)">
                          Edit
                        </button>

      </td>
    </tr>
    <tr id="second-tr">
      <td>Name 2</td>
      <td>Location 1</td>
      <td class="text-nowrap">
        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-second-tr" onclick="makeEditable(this)">
                          Edit
                        </button>
      </td>
    </tr>
    <tr id="third-tr">
      <td>Name 3</td>
      <td>Location 3</td>
      <td class="text-nowrap">
        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-third-tr" onclick="makeEditable(this)">
                           Edit
                        </button>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Akhil Aravind
Akhil Aravind

Reputation: 6130

Checkout the below snippet, we can edit the td on clicking edit and edit feature will be disabled on focus out of the content editable item

makeEditable = function(){
var el = event.target.parentElement.parentElement;
Object.keys(el.children).forEach(function(i){
  el.children[i].setAttribute('contenteditable', true);
  el.children[i].setAttribute('onblur', 'disableEdit()');
});
}
disableEdit = function(){
var el = event.target.parentElement;
Object.keys(el.children).forEach(function(i){
  el.children[i].removeAttribute('contenteditable', true);
});
}
<table class="table">
                  <thead>
                    <tr>
                      <th>Header 1</th>
                      <th>Header 2</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr id="first-tr">
                      <td>Name</td>
                      <td>Location 1</td>
                      <td class="text-nowrap">
                        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-first-tr" onclick="makeEditable()">
                          Edit
                        </button>

                      </td>
                    </tr>
                    <tr id="second-tr">
                      <td>Name 2</td>
                      <td>Location 1</td>
                      <td class="text-nowrap">
                        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-second-tr" onclick="makeEditable()">
                          Edit
                        </button>
                      </td>
                    </tr>
                    <tr id="third-tr">
                      <td>Name 3</td>
                      <td>Location 3</td>
                      <td class="text-nowrap">
                        <button type="button" class="btn btn-icon btn-default btn-outline" title="Edit" id="edit-third-tr" onclick="makeEditable()">
                           Edit
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>

Upvotes: 1

Related Questions