javascript - 模式弹出窗口中的表格行内容

Question

我在我的页面上使用 Twitter Bootstrap。在搜索结果表中，我想显示所有行内容。

我有这样的事情：

$('.more-detail').click(function(){
var row = $(this).parent().parent();
var data = [];
$(row).find('td').not(0).each(function(){
data.push($(this).text());

});
console.log(data);
});

可以看到console.log中的所有数据，但是如何将其移至模态？

谢谢

Answer 1

尝试这样的事情：

 $('.more-detail').click(function(){
    var row = $(this).parent().parent();
    var data = [];
    $(row).find('td').not(0).each(function(){
    data.push($(this).text());

    });
    $(body).append('<div class="modal">' + data.join('') + '</div>');
    $('.modal').modal();
 });

Answer 2

在文档中声明引导模式元素：

<div id="result-modal" class="modal hide fade" style="display:none">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;      </button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <table class="table">
      <thead>
        <tr>
          <th>head1</th>
          <th>head1</th>
          .....
        </tr>
      </thead>
      <tbody>
        <tr id="result-content">
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
  </div>
</div>

然后修改你的javascript代码：

$('.more-detail').click(function(){
  var row = $(this).parent().parent();
  var data = [];
  $("#result-content").empty();
  $(row).find('td').not(0).each(function(){
      data.push($(this).text());
      $("#result-content").append($(this).clone());
  });
  $('#result-modal').modal();
  console.log(data);
});

希望这对你有帮助。