在表格中展开一条线

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>

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

这是我所面临的巨大困境，我花了很多时间试图解决它。

如果您需要任何澄清，请告诉我。

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 {display: none;}

然后您可以轻松切换额外的行：

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

DEMO HERE

Answer 2

首先为元素添加一些指示符，单击该按钮将有一些操作。 例如：

$('#results-table').append('<tr><td class="player">'

然后添加一个事件监听器，如下所示：

$(document).on('click' , 'td.player', function () {
  alert("Clicked on" + $(this).hmtl());
});