单击表格行时如何使用模态显示数据（使用引导程序）
我是整个网络开发的初学者，在研究了很多之后我仍然无法完成这项工作。 很感谢任何forms的帮助。 我正在使用最新的rails版本和bootstrap来使事情变得更漂亮。
我有一个页面，其中包含一个餐厅的订单。 如果单击一行，我希望它使用bootstrap在模态窗口中显示订单详细信息。 我已经设法通过onclick + javascript函数打开模态，但它看起来有点混乱，我仍然不知道如何加载模式的内容div与订单信息。 这是我的代码：
HTML：
Orders
<table class="table table-striped" ID Customer Status <tr onclick="orderModal();"> JS：
function orderModal(order_id){ $('#orderModal').modal({ keyboard: true, backdrop: "static" }); };
你可以做的一件事是摆脱所有那些onclick属性，并以正确的方式使用bootstrap。 您无需手动打开它们; 您可以在模式打开之前指定触发器甚至订阅事件，以便您可以执行操作并在其中填充数据。
我将展示一个静态的例子，你可以在现实世界中容纳。
在每个
添加id （即data-id ）的数据属性和相应的id值，并指定一个data-target ，这是你指定的选择器，这样当单击时，bootstrap将选择该元素作为modal dialog并显示它。 然后你需要添加另一个属性data-toggle=modal来使它成为模态的触发器。
1 24234234 A 2 24234234 A 3 24234234 A
现在在javascript中只需设置一次模态，事件就可以听到它的事件，这样你就可以完成你的工作了。
$(function(){ $('#orderModal').modal({ keyboard: true, backdrop: "static", show:false, }).on('show', function(){ //subscribe to show method var getIdFromRow = $(event.target).closest('tr').data('id'); //get the id from tr //make your ajax call populate items or what even you need $(this).find('#orderDetails').html($(' Order Id selected: ' + getIdFromRow + '')) }); });
演示
不要再使用内联点击属性。 使用事件绑定代替vanilla js或使用jquery。
替代方式：
演示2或演示3
PSL的解决方案在Firefox中不起作用。 FF仅将事件作为forms参数接受。 因此，您必须找到另一种方法来识别所选行。 我的解决方案是这样的：
... $('#mySelector') .on('show.bs.modal', function(e) { var mid; if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) mid = $(e.relatedTarget).data('id'); else mid = $(event.target).closest('tr').data('id'); ...
最佳做法是在单击tr标签时ajax加载订单信息，并在$（’＃orderDetails’）中呈现信息html，如下所示：
$.get('the_get_order_info_url', { order_id: the_id_var }, function(data){ $('#orderDetails').html(data); }, 'script')
或者，您可以为包含订单信息的每个td添加类，并使用jQuery方法$（’。class’）。html（html_string）在显示模式之前将特定的订单信息插入到#orderDetails中，例如：
<% @restaurant.orders.each do |order| %> <%= order.id %> <%= order.customer_id %> <%= order.status %> <% end %>
JS：
function orderModal(order_id){ var tr = $('#order_' + order_id); // get the current info in html table var customer_id = tr.find('.customer_id'); var status = tr.find('.status'); // U should work on lines here: var info_to_insert = "order: " + order_id + ", customer: " + customer_id + " and status : " + status + "."; $('#orderDetails').html(info_to_insert); $('#orderModal').modal({ keyboard: true, backdrop: "static" }); };
而已。 但我强烈建议你在Rails上学习ajax。 它非常酷，效率很高。