Pass dynamically created html table row innertext id via row click event

Question

I have a htmltable that is dynamically created. I have made the rows clickable. I need to pass the row innertext id to the script that fires when the row is clicked.

htmltable:

<table style="width:100%;">
     <tr>
        <th>id</th>
        <th>name</th>
        <th>other info</th>
     </tr>
    <tr>
         <td class='table_row_click'>11</td>
        <td class='table_row_click'>item 2</td>
        <td class='table_row_click'>lmfao</td>
    </tr>
    <tr>
        <td class='table_row_click'>22</td>
        <td class='table_row_click'>item 2</td>
        <td class='table_row_click'>lol</td>
    </tr>
</table>

Click event:

$(document).ready(function ($) {
           $(".table_row_click").click(function (e) {

//I need to use the clicked row ID here for something 

            });
       });

Your rows don't have ids? If you're after the innerText of the td, then that's just e.target.innerText — Taplar
– Taplar, Commented Jan 30, 2020 at 20:42
Yes i apologise. I require the inner text id, in this example if i clicked the first row i would require the id "11". — Random Stuff
– Random Stuff, Commented Jan 30, 2020 at 20:45
actually, how will i specify with td has the inner text i want? as i can click any td on that row to fire the event — Random Stuff
– Random Stuff, Commented Jan 30, 2020 at 20:46
e is the event that was generated by clicking a particular element. e.target is the element the event originated from. — Taplar
– Taplar, Commented Jan 30, 2020 at 20:47

Taplar · Accepted Answer · 2020-01-30 20:57:46Z

1

$(e.target).closest('tr').find('td').first().text();

You can navigate up to the parent tr, find the td elemements, get the first one, and get its text.

Using closest('tr') will work if the class is on the td or tr level, as closest() can match on itself.

answered Jan 30, 2020 at 20:57

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Random Stuff Over a year ago

Perfect mate. Thank you very much

Collectives™ on Stack Overflow

Pass dynamically created html table row innertext id via row click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related