drno-reg
@drno-reg
см не кратко

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

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

<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)
}

Как по нажатию кнопки идентифицировать строку в таблице?
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
document.querySelector('table').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('save_order')) {
    const tr = t.closest('tr');  // всё, идентифицировали
  }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@dimoff66
Кратко о себе: Я есть
По свойству parentElement
Ответ написан
@AstraVlad
Финансист, консультант, программист-любитель
Добавить к каждой кнопке id и читать его? Добавить id к строке таблицы и взять его через e.target.parentElement... ?
Ответ написан
@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;
    }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽