JavaScript-单击时查找行的第一个单元格值

Question

I have the following table where each row has 4 cells with a button on the last cell:

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

When the button is clicked I want to find the first cell value of the same row using Javascript (no jquery ). For example if I click on the return button on the first row, it should return ABC

Answer 1

You can use the function closest to go up and get the element tr and then use the function querySelector to get the first element 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> 

Answer 2

APIs and Patterns

• HTMLTableElement.rows and HTMLTableRowElement.cells for easy table component manipulation.

• Event Delegation to efficiently control the click event of every tag in the table with only one event listener.

• event.target to reference the button that was clicked, event.currentTarget to reference the table.

• .contains() to get the row that the clicked button resided in.

• matches() to determine if event.target had a class called .return .

---

Demo

 var T = document.querySelector('.Table1'); T.addEventListener('click', function(e) { var out = document.getElementById('out'); // Clicked tag (ie a button.return) var tgt = e.target; // Tag registered to event (ie 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>