Javascript - rowIndex для кнопки не работает в таблице

Question

У меня есть следующий код, где я пытаюсь изменить содержимое первой ячейки в table2 на текст в table1 с использованием DOM / Javascript:

Я исследовал предыдущие вопросы по SO, включая использование ключевого слова this для передачи значения rowIndex, но они не работают.Буду признателен, если кто-нибудь сможет мне помочь.

function getmylocation() {
  var Row = document.getElementById('table1');
  var Cells = Row.getElementsByTagName("td");
  var RowToChange = document.getElementById('table2');
  var CellsToChange = RowToChange.getElementsByTagName("tr");
  CellsToChange[0].innerText = Cells[this.rowIndex].innerText;
}

<table id='table1'>
  <tr>
    <td> row1, col1</td>
    <td> <button onclick='getmylocation();'>Click</button></td>
  </tr>

  <tr>
    <td> row2, col1</td>
    <td> <button onclick='getmylocation();'>Click</button></td>
  </tr>
</table>

<br>

<table id='table2'>
  <tr>
    <td> empty1</td>
    <td>empty2</td>
  </tr>
</table>

Редактировать: В соответствии с ответом Мате, работал вместо getmylocation.call(this).

Answer 1

getmylocation() вызывается как метод <button>. Кнопки не имеют свойства rowIndex, как у строк таблицы. Это означает, что вы должны найти <tr>, в котором находится ваша кнопка. Вот несколько вариантов:

1. Быстрый и грязный способ

var MyRow = this.parentNode.parentNode;

Это на самом деле не рекомендуется, поскольку предполагается, что «дедушка» <button> - это <tr>. Если вы поместите <button> внутри любого элемента, такого как <span> в ячейке таблицы, это сломается.

2. Элегантный способ

var MyRow = this.closest('tr');

Метод closest() был введен сравнительно недавно, и его можно использовать для поиска ближайшего предка элемента, который соответствует переданному селектору CSS (в данном случае, 'tr'). Однако этот метод не поддерживается в старых браузерах, поэтому вам необходимо знать целевую аудиторию (см .: https://caniuse.com/#search=closest).

3. Промежуточный путь

var MyRow = this;
while (MyRow.tagName !== 'TR') {
    MyRow = MyRow.parentNode;
}

По сути, вы реализуете ограниченную версию closest(): вы начинаете с элемента <button>, в котором был инициирован щелчок, и циклически переключаетесь между его предками, пока не найдете первый, свойство tagName которого равно TR , Будьте осторожны: JavaScript чувствителен к регистру, и, как вы можете видеть, свойство tagName всегда в заглавных буквах, даже если вы написали HTML-код строчными буквами.