Как по нажатой кнопке идентифицировать строку в таблице?

Question

[Николай Бараненко]

Есть таблица:

<table id="table_orders" border="green">
            <thread>
                <tr><th>Name</th><th>Value</th><th>Count</th><th><button class="add_order">add</button></th>
            </thread>
            <tr>
                <td>Coffee</td><td>100</td><td><input type="text" class="input_count" value="1"></td><td><button class="save_order" onclick="saveTR(this)">save</button></td>
            </tr>
            <tr>
                <td>Tea</td><td>200</td><td><input type="text" class="input_count" value="2"></td><td><button class="save_order" onclick="saveTR(this)">save</button></td>
            </tr>
        </table>

function saveTR(xThis){
                console.log(xThis)
}

Как по нажатию кнопки идентифицировать строку в таблице?

Answer 1

[0xD34F]

Повесить на таблицу обработчик клика; внутри проверять, кто был нажат - если кнопка, получить ближайшего предка, который является строкой таблицы:

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('save_order')) {
    const tr = t.closest('tr');
    console.log(tr);
  }

  // или

  if (t.matches('.save_order')) {
    let tr = t;
    while ((tr = tr.parentNode).tagName !== 'TR') ;
    console.log(tr);
  }
});

Answer 2

[Дмитрий]

По свойству parentElement

Answer 3

[Владимир]

Добавить к каждой кнопке id и читать его? Добавить id к строке таблицы и взять его через e.target.parentElement... ?

Answer 4

[wisead]

лучше всего конечно, если у вас есть массив данных, и если вы их выводите в цикле, получать именно доступ к объекту отображения, то есть обработчик события в качестве аргумента будет получать не HTMLElement, а не посредственно сам объект данных.

Например:

function createElement(tag, attr) {
            const element = document.createElement(tag);

            Object.keys(attr).forEach(key => {
                element.setAttribute(key, attr[key]);
            });
            return element;
        }

    function createTdElements(worker) {
        const tr = createElement('tr', { class: 'table__body-row' });
        const button = createElement('button');
        Object.keys(worker).forEach(prop => {
            const td = createElement('td', { class: 'table__body-item' });
            td.textContent = worker[prop];
            tr.appendChild(td);
        });
          button.addEventListener('click', (_,worker) => {
              ...здесь нужная логика c worker
           })
        tr.appendChild(button)
        return tr;
    }