Вопросы Теги

максимальное количество заданий для запуска в отложенном задании

Если вы можете использовать экспериментальную функцию, вы можете использовать Element.closest, чтобы найти предка tr, а затем просто использовать document.querySelector с помощью селектора CSS, найдите элемент td с class="note".

Я также поставил более уродливое (но все еще работающее) решение с помощью Node.parentElement - это сломается, если вы реструктурируете свой HTML! 

document.addEventListener('click', (event) => {
  /*if (event.target.className === 'interactive-btn') {
    //looks nice, but experimental - probably shouldn't be used in production code
    var noteEl = event.target.closest('tr').querySelector('td[class=note]');

    noteEl.innerHTML = 'Changed!'
  }
});*/

  if (event.target.className === 'interactive-btn') {
    //a little uglier but works if your HTML structure doesnt change
    var noteEl = event.target.parentElement.parentElement.querySelector('td[class=note]');

    noteEl.innerHTML = 'Changed!'
  }
});
<table class="my-table">
  <thead>
    <tr>
      <th>Account</th>
      <th>Note</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="account">account one</td>
      <td class="note">1234567890</td>
      <td class="time">7/10/2018
        <button class="interactive-btn">Button</button>
      </td>
    </tr>
    <tr>
      <td class="account">account two</td>
      <td class="note">abcdefghijklmn</td>
      <td class="time">7/10/2018
        <button class="interactive-btn">Button</button>
      </td>
    </tr>
  </tbody>
</table>

0
задан Aaditya Maheshwari 19 January 2019 в 09:56
поделиться