Expand a line in a table

Question

Using the following example, a table that pulls all of the items in Parse for its particular column (I.e. if there is 20 subjects in parse, than 20 subjects would be displayed). http://jsfiddle.net/richf/sKLxE/

Below is the code for it:

Javascript:

//message
  var Message = Parse.Object.extend("Message"); 
    var query = new Parse.Query(Message);
        query.descending("createdAt");         
    query.find({
    success: function(results) {
    //alert("Successfully retrieved " );
    // Do something with the returned Parse.Object values
    for (var i = 0; i < results.length; i++) { 
      var object = results[i];
      (function($) {
   $('#messages-table').append('<tr><td>' + object.get('currentDate') + '</td><td>' +  object.get('Subject') + '</td><td>' + object.get('Message') + '</td></tr>');
})(jQuery);

      //alert(object.id + ' - ' + object.get('playerName'));
    }
    },
    error: function(error) {
    alert("Error: " + error.code + " " + error.message);
    }
    });

HTML

<table id="messages-table">
<tr>     
<th>
<h1>Date</h1></th>


 <th>
<h1>Subject</h1></th>



  <th><h1>Message</h1></th>
</tr>
</table>

What I am trying to achieve is the following is making each line clickable, where when someone clicks on a line then the message from the “message” column in parse is retrieved, and displayed right below the line click, and once that line is click again, that message is hidden.

This is a massive dilemma I am having, I have spent quite some time trying to resolve it.

If you need any clarification, let me know.

Answer 1

Add a class to the rows... and add your additional data as a hidden table row.

  $('#results-table').append('<tr class="results-row"><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr><tr class="xtra"><td colspan="2">INSERT MESSAGE HERE</td></tr>');

(Note extra table row added above)

CSS: .xtra {display: none;}

Then you can easily toggle that extra row:

$(document).on('click' , '.results-row', function () {
  $(this).next('.xtra').toggle();
});

DEMO HERE