在 table 中展开一行

Question

使用以下示例，一个 table 将 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><td class="player">'

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

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

Answer 2

向行添加 class...并将您的附加数据添加为隐藏的 table 行。

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

（注意上面添加的额外 table 行）

CSS: .xtra {display: none;}

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

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

DEMO HERE

在 table 中展开一行

Expand a line in a table

html

javascript

jquery

html-table

parse-platform