Highlighting row of a HTML table which is populated using AJAX return data

Question

How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.

Below is the code which is not working:

$('table#tblBdy tbody tr').click(function() {
   $('tr').click(function () {
     var tableData = $(this).closest("tr").children("td").map(function() {  
    return $(this).text();
   }).get();
   $('#bx1txt').val($.trim(tableData[0]));
   $('#bx2txt').val($.trim(tableData[1]));
   $('#oldqty').val($.trim(tableData[1]));
});

No my question is altogether different. I want to highlight the value of the html table row on mouse click — Suneet, Apr 22 '15 at 17:56
Can you explain in what manner this code is not working? Does the click handler itself trigger when you click a row? How far does the `tableData` expression get? Have you tried breaking that up and seeing if the `closest()` and `children()` methods get what you expect? — halfer, Apr 22 '15 at 18:14
**Close voters: This is not a duplicate of the asynchronous return question. Please read the question thoroughly before voting to close** — Madara's Ghost, Apr 23 '15 at 07:01

score 0 · Answer 1 · answered Apr 22 '15 at 21:34

I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...

If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.

I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.

Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.

//handles table cell click events
$('td').click(function(){

  //updates the value
  var cellValue = $(this).html();

  //find the row of table where cell was clicked
  var tr = $(this).closest('tr');

  //removes select class from all rows
  $(tr).siblings().removeClass('highlight');

  //adds class to highlight selected row
  tr.addClass('highlight');

});

score 0 · Answer 2 · answered Apr 23 '15 at 07:00

0

The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.

You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).

// ancestor      event    real selector
$('#tblBdy').on('click', 'tbody td', function() {
    // Same code as yours in the handlers
});

answered Apr 23 '15 at 07:00

Madara's Ghost

172,118
50
264
308

Please see the edit above -"Updated Code". Clicking a row of html table not working - neither highlighting the entire clicked row nor picking up cell value of the selected row and putting in the textbox, I have two textboxes : "bx1txt" and "bx2txt" just below the table which should be filled when the user selects a row. Value of selected row column 1 and column 2 should be filled in these boxes respectively. Please Help ?? – Suneet Apr 23 '15 at 07:59

Highlighting row of a HTML table which is populated using AJAX return data

2 Answers2