Question

I need some help pulling cell data from table when a user clicks the an button at the end of the table row. The table is generated via Ajax technique. I’m not sure if this makes a difference when accessing elements of the table.

<script type='text/javascript' src='jquery.js'></script> 
  <p>** click me **</p>
  <br/>
  <div id="placeHolder">some text goes here!</p>
<script>
    $("p").click(function () { 

        $.ajax({
          url: "status_2.html",       
          cache: false,
          success: fnSuccess
          }
        );
    });

   function fnSuccess(msg)
    {
        $('div#placeHolder').html(msg);
    }

function selectEditActivity(pass_id){   
    var row = $('#'+pass_id); 
    var seq = row.attr('seq');      
    // here I would like to pull the value of the date from the selected row
    // but I just can't get syntax right.  I get a null value on alert
    var from_date   = $('td', row).eq(0).html();  
    alert(from_date);
}
</script>

This is the html code that gets read in (file: status_2.html)

  <span id="status2"> 
  <span id="response" class="response"></span>

  <table class="tableBorder">
  <tr >
   <th class="align_left">Date</th>
  </tr><tr>

  <tr seq="1" class="row_theme2" id="id3014201105191"></tr>
    <tr><td>20090519</td>
    <td>1330</td>
  <td>1430</td>
  <td>LUNCH</td>  
   <td></td>
   <td><a onclick="selectEditActivity('id3014201105191');" href="#">EDIT</a></td>
 </tr>

  <tr seq="2" class="row_theme2" id="id3014201105192"></tr>
    <tr><td>20100519</td>
    <td>1330</td>
  <td>1430</td>
  <td>LUNCH</td>  
   <td></td>   
   <td><a onclick="selectEditActivity('id3014201105192');" href="#">EDIT</a></td>
 </tr>

  <tr seq="3" class="row_theme2" id="id3014201105193"></tr>
    <tr><td>20110519</td>
    <td>1330</td>
  <td>1430</td>
  <td>LUNCH</td>  
   <td></td>   
   <td><a onclick="selectEditActivity('id3014201105193');" href="#">EDIT</a></td>
 </tr>
</tbody></table>

Answer 1

Change this:

var from_date = $('td', row).eq(0).html();  

to this:

var from_date = row.next().children('td').eq(0).html();

…because the information you’re looking for is in the next row over from the one with the ID. The row with the ID has no <td> elements.

Live Example: http://jsfiddle.net/kkP56/

---

EDIT: You could get rid of the inline onclick handlers and let jQuery assign the handlers if you wanted.

$(function() {

    $('table tr a').click(function() {
        var from_date = $(this).parent().prevAll().last().html();
        alert( from_date );
    });

});