JavaScript - Найти первое значение строки строки при нажатии

Question

У меня есть следующая таблица, где в каждой строке есть 4 ячейки с кнопкой на последней ячейке:

<table class='Table1'>
     <tr>
        <td>
            ABC
        </td>
        <td>
            DEF
        </td>
        <td>
            GHI
        </td>
        <td>
            <button class='return'>return</button>
        </td>
     </tr>
     <tr>
        <td>
            JKL
        </td>
        <td>
            MNO
        </td>
        <td>
            PQR
        </td>
        <td>
            <button class='return'>return</button>
        </td>
     </tr>

</table>

Когда нажата кнопка, я хочу найти значение первой ячейки той же строки, используя Javascript (нет jquery).Например, если я нажму на кнопку return в первой строке, она должна вернуть ABC

Answer 1

API и шаблоны

• HTMLTableElement.rows и HTMLTableRowElement.cells дляпростое управление компонентами таблицы.

• Делегирование события для эффективного управления событием щелчка для каждого тега в таблице только с одним прослушивателем событий.

• event.target для ссылки на нажатую кнопку, event.currentTarget для ссылки на таблицу.

• .contains(), чтобы получить строку, в которой находилась нажатая кнопка.

• matches(), чтобы определить, имел ли event.target класс с именем .return.

---

Демо

var T = document.querySelector('.Table1');

T.addEventListener('click', function(e) {
  var out = document.getElementById('out');
  // Clicked tag (i.e. a button.return)
  var tgt = e.target;
  // Tag registered to event (i.e. table.Table1)
  var cur = e.currentTarget;
  // A HTMLCollection of every <tr> in .table1
  var Rows = cur.rows;
  // Declare blank string;
  var txt = "";
  /*
  if clicked tag is NOT .Table1 AND it has class .return...
  */
  if (tgt !== cur && tgt.matches('.return')) {
    /*
    Begin count at 0; keep counting until the last row;
    increment cont by 1
    */
    for (let i = 0; i < Rows.length; i++) {
      // if this row has the clicked button as a descendant...
      if (Rows[i].contains(tgt)) {
        // Get the text of that row's first cell
        txt = Rows[i].cells[0].textContent;
      }
    }
    // Set the value of output#out to extracted text
    out.value = txt;
  }
});

table,
td {
  border: 3px solid #000;
}

#out {
  display: block
}

<output id='out'>&nbsp;</output>
<table class='Table1'>
  <tr>
    <td> ABC </td>
    <td> DEF </td>
    <td> GHI </td>
    <td> <button class='return'>return</button> </td>
  </tr>
  <tr>
    <td> JKL </td>
    <td> MNO </td>
    <td> PQR </td>
    <td> <button class='return'>return</button> </td>
  </tr>
  <tr>
    <td> HHH </td>
    <td> DEF </td>
    <td> GHI </td>
    <td> <button class='return'>return</button> </td>
  </tr>
  <tr>
    <td> 123 </td>
    <td> DEF </td>
    <td> GHI </td>
    <td> <button class='return'>return</button> </td>
  </tr>
  <tr>
    <td> XYZ </td>
    <td> DEF </td>
    <td> GHI </td>
    <td> <button class='return'>return</button> </td>
  </tr>
  <tr>
    <td> XXX </td>
    <td> DEF </td>
    <td> GHI </td>
    <td> <button class='return'>return</button> </td>
  </tr>
</table>

Answer 2

Вы можете использовать функцию closest, чтобы подняться и получить элемент tr, а затем использовать функцию querySelector, чтобы получить первый элемент td.

.

Array.prototype.forEach.call(document.querySelectorAll('button'), function(b) {
  b.addEventListener('click', function() {
    console.log(this.closest('tr').querySelector('td').textContent.trim());
  });
})

<table class='Table1'>  <tr>    <td>      ABC    </td>    <td>      DEF    </td>    <td>      GHI    </td>    <td>      <button class='return'>return</button>    </td>  </tr>  <tr>    <td>      JKL    </td>    <td>      MNO    </td>    <td>      PQR    </td>    <td>      <button class='return'>return</button>    </td>  </tr></table>