In table how to get the table TD tag data when clicking?

Question

I am loading some card details on each of the td tag in table. When I click on particular td data, the action is not working. I already wrote the jQuery function for onclick event of td tag, but it not working.

Table:

<table class="metricTable" border="2" bordercolor="white" style="background-color:#066B12;">
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="matches" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="runs" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="centuries" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
  </tr>
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="fifties" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="batting_average" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="wickets" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
  </tr>
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="bowling_average" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="best_bowling" />
    <input type="hidden" value="" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="catches" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
      </tr>
    </table>

jQuery function for onclick on td :

$('.metricTable td').click(function(){
    alert("hi");
    //some code
});

When I click on td, simple alert also not coming.

Can anybody provide the code for onclicking the td data and how to retrieve the particular td data. ?

Please reply.

Answer 1

please try this

  $( document ).ready(function() {

     $('.metricTable tr > td').click(function(){
                       alert($(this).html());
                                  //some code
                    });
});

Demo here : http://jsfiddle.net/MCeJ9/2/

Answer 2

Try this if the value you looking for is in the input tag:

$('.metricTable td').click(function(){
    var input1 = $(this).find('input').eq(0).val();
    var input2 = $(this).find('.card_value').val();
    alert(input1+" and "+input2);
});

for the value in div tag

$('.metricTable td').click(function(){
    var input1 = $(this).find('.card_content1').text();
    var input2 = $(this).find('.card_content').text();
    alert(input1+" and "+input2);
});

Answer 3

If the cells are dynamically generated, you need to use the .on() function:

$('.metricTable').on('click', 'td', function(){
    alert("hi");
    //some code
});

To get the contents of the cell, use the .text() or .html() functions:

$('.metricTable').on('click', 'td', function(){
    alert( $(this).text() );
});

Answer 4

Wish we could see your markup ... and we could tell whether or not the whole table is dynamically generated! It it is and markup looks like that below:

<table class="metricTable"> . .. . .. . . . .</table>

Then try delegated approach:

$(function() {
    $(document).on( 'click', '.metricTable td', function() {
        alert( $(this).html() );
    });
});

When putting the data in the table thus:

$(this).find('.selector').val( card[0][4] );

At the same time the source data 0,4 can be stored in the same element thus:

$(this).find('.selector').data('source','0,4');

These can be retrieved respectively as follows:

   theValue = $(this).find('.selector').val();
   theSource = $(this).find('.selector').data('source');