Как эффективно сделать редактируемые строки?

Question

У меня есть запрос, я использую js, чтобы сделать таблицу tds редактируемой.Я могу сделать это с помощью отдельных методов на кнопке редактирования.

Я хочу знать, что будет более эффективным способом кодирования этого, чтобы при каждом редактировании по клику создавалась только эта конкретная строка, и в будущем, если я увеличу строки таблицы,это должно быть в состоянии сделать это.

Сейчас я назначаю id для tr и нацеливаюсь на его элементы строки, что работает, но кажется неэффективным.

что-то вроде

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

Вот ссылочный коднапример

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

Заранее спасибо:)

Answer 1

Извлеките приведенный ниже фрагмент, мы можем отредактировать td при нажатии edit, и функция редактирования будет отключена при фокусировке вне элемента редактируемого содержимого

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>

Answer 2

Обновление onclick="makeEditable(this)" для элемента.Здесь this будет текущим td объектом элемента.

Используйте один параметр с функцией как makeEditable = (td) => {...

И используйте var toBeEdited = td.parentElement.parentElement.getElementsByTagName('td'); для извлечения соответствующих tr потомков.

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>