Retrieve row info of a dynamic table using Jquery when user clicks on it

Question

I am new to Jquery. I am learning the things one by one. my requirement is to create a dynamic jquery datatable.So I created in the following way: The variable formattedCKEY is a dynamic value that I am using for generating the table id's dynamically

var issueTableId = "issuetable_"+formattedCKEY;
var $issuetable = $("
<table  id='" + issueTableId + "' class='stripe nowrap'  style='position:relative; top:0px; width:95%;'></table>
");
$issuetable.append('
<thead>
   ').children('thead')
   .append('
   <tr />
      ').children('tr')
      .append('
      <th nowrap>Select</th>
      '+
      '
      <th nowrap>Priority</th>
      ' +
      '
      <th nowrap>Issue ID</th>
      ' +
      var $tbody = $issuetable.append('
<tbody />
   ').children('tbody');
   $.each(cases, function () {
   $tbody.append('
   <tr />
      ').children('tr:last')
      .append('
      <td nowrap><input type="checkbox" />&nbsp;</td>
      ')
      .append('
      <td nowrap>' + $(this).find("PRTY").text() + '</td>
      ')
      .append(sourceRow)
      .append('
      <td nowrap>' + $(this).find("ISSUEID").text() + '</td>
      ');
      });

Here I am struggling with selecting the row information when the user click on that particular row. can anybody help me out how to do this when there are dynamic table id's?

I have tried with following code so far:

 //DataTables aplies style and behavior to <table>
 var table = $("#" + issueTableId).DataTable({
     "scrollY": 315, // inconsistent IE7/other
     "scrollX": true,
     "searching": false,
     "paging": false,
     "info": false
 });

 table.rows().every(function(rowIdx, tableLoop, rowLoop) {
     var row = this.row(rowIdx).node();
     // add contextMenu to each rows onclick
     $(row).click(displayResultslistPopup);
     // add onclick for each rows checkbox
     $(row).find('input:checkbox').click(function(event) {
         event.stopPropagation();
         $('#SAcheckBox').prop('checked', false);
     });
     // use presence of the attachmentImage.png to add jquery click event for td:
     $(row).find('td:has(img)').click(function(event) {
         event.stopPropagation();
         var id = $(this).parent().attr('id');
         issueAttachmentAttachmentLookUp(id);
     });
 });

But somehow table.rows().every() is not working for me. My intention is to register the click event on table row and retrieve the necessary row information.

Answer 1

If you want to bind a function to your row click, you can use click() function of jquery and pass a callback function.

$tbody.append('<tr />')
    .click(rowClickCallback)
    .children('tr:last')....

function rowClickCallback(e) {
    console.log(e.target); // It returns the TD which user clicked
    console.log(e.target.parentElement); // It returns the TR which user clicked
}