Question

I’m trying to get the text in the <th> tag within the nested table when any of the <tr> tags from the outer table are clicked. In the jsfiddle example at the bottom, you will see the outer table has a hover state. The script I have sort of works, but the alert fires twice. It does show the correct text, but my targeting is likely wrong for the alert to fire twice.

html:

<table id="device-table"  width="400" border="0" cellpadding="5" class="table table-hover">
  <tr><!-- if I click anywhere in this row -->
    <td><table width="400" border="0" cellpadding="5">
      <tr>
        <th colspan="4" scope="col">2048 x 1536</th> <!-- I want to grab this text -->
      </tr>
      <tr>
        <td>Apple</td>
        <td>iPad 3</td>
        <td>9.7"</td>
        <td>Tablet</td>
      </tr>
    </table></td>
  </tr>
  <tr><!-- if I click anywhere in this row -->
    <td><table width="400" border="0" cellpadding="5">
      <tr>
        <th colspan="4" scope="col">320 x 240</th> <!-- I want to grab this text -->
      </tr>
      <tr>
        <td>Samsung</td>
        <td>Brightside</td>
        <td>3.1"</td>
        <td>Smartphone</td>
      </tr>
    </table></td>
  </tr>
</table>

script:

$('#device-table').find('tr').click( function(){
  var row = $(this).find('th:first').text();
  alert('You clicked ' + row);
 });

Here is a jsfiddle: http://jsfiddle.net/9ZRpt/

Answer 1

Make sure you are only selecting the rows on the first table, not the nested table.

$('#device-table>tbody>tr').on("click", function(){
  var row = $(this).find('th:first').text();
  alert('You clicked ' + row);
 });