Вытянуть id javascript

Question

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

const send = (e) => {
  if ((e.type === 'blur' && e.target.contentEditable === 'true') || e.which === 13) {
    e.preventDefault();
    e.target.contentEditable = false;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'edit.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(`text=${encodeURIComponent(e.target.textContent)}`);
  }
};

[...document.querySelectorAll('td')].forEach(el => {
  el.addEventListener('dblclick', e => {
    e.target.contentEditable = true;
    e.target.focus();
  });

  el.addEventListener('keypress', send);
  el.addEventListener('blur', send);
});

Как добавить в скрипт возможность при двойном клике вытянуть id конкретной строки чтобы обработчик edit.php знал в какой конкретно строке вносить изменения?

Answer 1

ну, если ID, у родителя (TR) наверное получить, tr и взять его ID. Как-то так const id = e.target.closest('tr').id; . Если ID самой ячейки, то сразу у target - const id = e.target.id;

const send = (e) => {
  if ((e.type === 'blur' && e.target.contentEditable === 'true') || e.which === 13) {
    e.preventDefault();
    e.target.contentEditable = false;

    /** получаете, родителя в виде TR, и далее его ID. Ну или сразу у TD */
    const id = e.target.closest('tr').id;
    // const id = e.target.id;

    /** формируете, данные для сервера*/
    const data = JSON.stringify({
      text: encodeURIComponent(e.target.textContent),
      id
    });

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'edit.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  }
};

[...document.querySelectorAll('td')].forEach(el => {
  el.addEventListener('dblclick', e => {
    e.target.contentEditable = true;
    e.target.focus();
  });

  el.addEventListener('keypress', send);
  el.addEventListener('blur', send);
});

БЛОГ НА HUSL

Вытянуть id javascript

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