在表格中展开一条线

使用下面的示例，获取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>

enter image description here

我所试图实现的是正在以下每一行点击当有人点击一行时，在解析中的“消息”列中的消息被检索，并显示在行单击的正下方，并且一旦该行再次单击，则该消息被隐藏。

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

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

来源

2015-01-26 Jon

类似弹出功能http：// js fiddle.net/SRw67/ – Sigismundus 2015-01-26 22:42:29

感谢您的回应，但不完全是一个弹出窗口，但更多将显示在文档中（只需将下面的一行按下来创建空间来显示该项目） – Jon 2015-01-26 22:43:37

您可以提供一些数据来玩消息和表格显示？ – Sigismundus 2015-01-26 22:51:54

添加一个类中的行...并添加额外的数据作为一个隐藏的表行。

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

来源

2015-01-26 23:12:57 Scott

非常感谢你斯科特。这是我正在寻找的。一个简单的问题，让我看看我想用object.get（'score'）替换INSERT MESSAGE HERE，我试图在演示中这样做，但那不会起作用 – Jon 2015-01-26 23:22:46

@Jon在这里可以正常工作.... http： //jsfiddle.net/sKLxE/40/ ...你必须在演示中有错误。 – Scott 2015-01-26 23:24:02

干得好兄弟 – Jon 2015-01-26 23:36:04

首先为元素添加一些指标，点击后会有一些动作。例如：

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

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

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

来源

2015-01-26 23:09:35 Sigismundus

在表格中展开一条线

回答

相关问题