javascript - 展开表格中的一行

Question

使用以下示例，一个表会提取 Parse 中其特定列的所有项目(即，如果解析中有 20 个主题，则将显示超过 20 个主题)。 http://jsfiddle.net/richf/sKLxE/

下面是它的代码:

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>

我想要实现的目标是使每一行都可单击，当有人单击一行时，会检索解析中“消息”列中的消息，并将其显示在该行单击的正下方，一旦单击再次单击该行，该消息将被隐藏。

这是我面临的一个巨大的困境，我花了相当多的时间试图解决它。

如果您需要任何说明，请告诉我。

Answer 1

向行添加一个类...并将附加数据添加为隐藏的表行。

  $('#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>');

(注意上面添加的额外表格行)

CSS:.xtra {显示:无;}

然后您可以轻松切换该额外行:

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

DEMO HERE