Как получить значение первой ячейки при клике на кнопку?

Question

[demortall]

Допустим вот у меня есть таблица и он циклом подгружает на новые ячейки значение id. И мне нужно при клике на кнопку удалить узнать значение ячейки которую хочет удалить пользователь.

<table>
                <thead><tr>id</tr><tr>delete</tr></thead>
                <td>
                    {% for id in ids %}
                    <tr>{{id}}</tr>
                    <tr><button id="delete_btn"></button></tr>
                    {% endfor %}
                </td>
            </table>

Answer 1

[Stalker_RED]

Внутрь ячейки (td) вставляете кучу строк (tr). И в каждой строке кнопки с одинаковыми id.
Не надо так.

<table>
   <thead><th>id</th><th>delete</th></thead>
   <tr>
      {% for id in ids %}
      <td>{{id}}</td>
      <td><button>x</button></td>
      {% endfor %}
    </tr>
</table>

table.addEventListener('click', function(evt){
  const btn = evt.target.closest('button');
  if (btn) {
    const id = btn.parentNode.previousElementSibling.textContent;
    console.log({id});
  }
});

Comments

[demortall]

А можно по индексу узнать содержимое? Индекс ячейки. Именно первой

[Stalker_RED]

demortall,

const firstCellValue = btn.closest('tr') // ближайший родительский tr
  .querySelector('td') // первая попавшаяся ячейка
  .textContent;

[demortall]

Stalker_RED, У меня вот первая кнопка удаление работает а вторая нет.

<form action="" id="delete_log">
                    <td style="width: 10px;">
                        <button class="delete">
                            <i class="fas fa-trash-alt">

                            </i>
                        </button>
                    </td>
                </form>

Думаю что это изза того что у всех у них один и тот же id

[Stalker_RED]

demortall, удалите id вообще