Detect the row and get the td value using javascript. (Dynamic table)

Question

I totally want to avoid using inline javascript! But i have a table which is being dynamically generated from a mysql database using php. I want that if a user clicks on any of the rows it creates a modal with the information about the clicked row. Now i am able to initialise the modal, however the first column of the table holds an index value which can be used to retrieve the information about that row. My question is how can i retrieve that index value using javascript. To initiate the modal i am using the following code:

$('#production tr').click(function(){
     $('#review_order').modal('show');
}) ;

Table markup:

<table id="order_basket" class="table table-bordered">
    <thead>
       <th>Voucher ID</th>
       <th>Title</th>
       <th>Created By</th>
    </thead>
    <tbody>
       <tr><td>1<td>
        <td>Something here</td>
        <td>Some Person</td></tr>
    </tbody>
<table>

Post a bit of our table's markup - include the code that has the index value that you want to retrieve. — James Hill
– James Hill, Commented Mar 1, 2012 at 12:37

pimvdb · Accepted Answer · 2012-03-01 12:38:25Z

1

Unless you've added rowspan/colspan attributes, the first column in a row is the tr's first td child:

$('#production tr').click(function() {
    var index = $(this).children("td").first().text();
    // `index` is the text in the first column in the clicked row

    $('#review_order').modal('show');
});

answered Mar 1, 2012 at 12:38

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

2 Comments

pimvdb Over a year ago

@Namit: Do note that your posted HTML is invalid because you actually don't have any trs. The ID seems different as well but if it works then never mind :)

Namit Over a year ago

Thanks for pointing that out, i just wrote it quickly so that everyone could get an idea. Sorry!

Collectives™ on Stack Overflow

Detect the row and get the td value using javascript. (Dynamic table)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related