Редактирование новосозданых строк в таблице HTML

Question

Я написал код, который позволяет добавлять строки в пустую таблицу.

Теперь я имею ещё скрипт, для редактирования строк, но он работает только для тех строк, которые созданы "по умолчанию".

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
    var wiersz = document.createElement("tr");

    var tdNumer = document.createElement("td");
    var val1 = document.getElementById("liczba").value;
    tdNumer.innerHTML = val1;

    var tdText = document.createElement("td");
    var val2 = document.getElementById("tekst").value;
    tdText.innerHTML = val2;

    wiersz.appendChild(tdNumer);
    wiersz.appendChild(tdText);
    var dodac = document.getElementById("tbd");
    dodac.appendChild(wiersz);
}

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++) {
    tds[i].addEventListener('click', function func() {
        var input = document.createElement('input');
        input.value = this.innerHTML;
        this.innerHTML = '';
        this.appendChild(input);

        var td = this;
        input.addEventListener('blur', function() {
            td.innerHTML = this.value;
            td.addEventListener('click', func);
        });

        this.removeEventListener('click', func);
    });
}

<table class="dowolnanazwa">
    <thead>
    <tr>
        <th>Numer porządkowy</th>
        <th>Nazwa epizodu</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Epizod numer 1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Epizod numer 2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Epizod numer 3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Epizod numer 4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Epizod numer 5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Epizod numer 6</td>
    </tr>
    </tbody>
</table>

<table class="dowolnanazwa">
    <tbody id="tbd">

    </tbody>
</table>


Поделиться
Прави
<p align="center">Numer: <input type="number" id="liczba"></p> 
<p align="center">Nazwa: <input type="text" id="tekst"></p> 
<p align="center"><button id="myBtn">Dodaj wiersz</button></p>

Можно ли как-то сделать, что бы я мог редактировать строки, которые я создам на странице уже потом?

Answer 1

Решение достаточно простое. Вы должны добавлять событие на только что созданную td

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  tdNumer.innerHTML = val1;
  tdNumer.addEventListener('click', func);  // добавляем событие

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  tdText.innerHTML = val2;
  tdText.addEventListener('click', func);   // добавляем событие

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);

  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);
}

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++) {
    tds[i].addEventListener('click', func);
}

function func() {
  var input = document.createElement('input');
  input.value = this.innerHTML;
  this.innerHTML = '';
  this.appendChild(input);

  var td = this;
  input.addEventListener('blur', function() {
    td.innerHTML = this.value;
    td.addEventListener('click', func);
  });

  this.removeEventListener('click', func);
}

<table class="dowolnanazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Epizod numer 6</td>
    </tr>
  </tbody>
</table>

<table class="dowolnanazwa">
  <tbody id="tbd">

  </tbody>
</table>


Поделиться
Прави
<p align="center">Numer: <input type="number" id="liczba"></p> <p align="center">Nazwa: <input type="text" id="tekst"></p> <p align="center"><button id="myBtn">Dodaj wiersz</button></p>

Answer 2

Если все ячейки таблицы редактируются, зачем подобные сложности?
Установить contenteditable всем ячейкам и отслеживать изменения.

const table = document.querySelector('table')
const button = document.querySelector('button')

function addInputHandler(el) {
  const def = el.textContent
  let current = def
  const input = () => {
    current = el.textContent
  }
  const remove = () => {
    el.removeEventListener('input', input)
    if (def !== current) {
      console.log('Что-то делаем с новым текстом: ' + current)
    }
  }
  el.addEventListener('input', input)
  el.addEventListener('focusout', remove, { once: true })
}


table.addEventListener('focusin', ({ target }) => {
  if (/^td$/i.test(target.tagName)) {
    addInputHandler(target)
  }
})

let count = 2
button.addEventListener('click', () => {
  let el = table.querySelector('tr').cloneNode(true)
  el.firstElementChild.textContent = ++count
  table.appendChild(el)
})

td {
  border: solid 1px #9e9e9e;
  width: 100px;
}

<table>
  <tr>
    <td contenteditable>1</td>
    <td contenteditable>text</td>
  </tr>
  <tr>
    <td contenteditable>2</td>
    <td contenteditable>text</td>
  </tr>
</table>
<button>add row</button>

БЛОГ НА HUSL

Редактирование новосозданых строк в таблице HTML

Ответы (2 шт):