数据表格行在模态窗口中显示。

Question

组合了一个datatable和modal以便在单击行时使用。然而，我无法使datatable内容在modal内渲染。需要在每个列的信息下显示独特的span类。这是我的HTML代码，其中表头如下定义，表格主体由JS呈现：

<!-- Datatable here -->
<table id="grabbed-report" class="display" width="100%">
     <thead>
        <tr>
            <th>Alpha:</th>
            <th>Bravo:</th>
            <th>Charlie:</th>
            <th>Delta:</th>
            <th>Echo:</th>
            <th>Foxtrot:</th>
            <th>Golf:</th>
            <th>Hotel:</th>
        </tr>
    </thead>
</table>


<!-- Modal here -->
<div class="modal fade" id="globesModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content here-->
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Modal Details</h4>
    </div>
    <div class="modal-body">
      <div class="alpha"><p>Alpha: </p><span></span></div>
      <div class="bravo"><p>Bravo: </p><span></span></div>
      <div class="charlie"><p>Charlie: </p><span></span></div>
      <div class="delta"><p>Delta: </p><span></span></div> 
      <div class="echo"><p>Echo: </p><span></span></div>
      <div class="foxtrot"><p>Foxtrot: </p><span></span></div>
      <div class="golf"><p>Golf: </p><span></span></div>
       <div class="hotel"><p>Hotel: </p><span></span></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>
</div>

从datatable的文档中，我认为我已经正确地编写了我的JS代码：

 $('#grabbed-report').DataTable({
        searching: true,
        responsive: true,
        // Data from JS
        data: grabbingData,
        columns: [
            { data: "Alpha" },
            { data: "Bravo" },
            { data: "Charlie" },
            { data: "Delta" },
            { data: "Echo" },
            { data: "Foxtrot" },
            { data: "Golf" },
            { data: "Hotel" }
        ],
        "autoWidth": false,
    });

所以我认为问题可能出在我的JQuery目标行内容上？

为了排除故障，我添加了一个控制台日志，以确保在单击行时捕获信息。确认它被捕获了。然而，它似乎没有出现在相应的span元素下面。所以我可能没有正确地定位这些元素？我已经尝试过.text和.html。

这是模态框的JQuery代码：

//Modal setup:
    $('#grabbed-report tbody').on('click', 'tr', function () {
       console.log(table.row(this).data());
        $(".modal-body div span").text("");
        $(".alpha span").text(table.row(this).data()[1]);
        $(".bravo span").text(table.row(this).data()[1]);
        $(".charlie span").text(table.row(this).data()[2]);
        $(".delta span").text(table.row(this).data()[3]).hide();
        $(".echo span").text(table.row(this).data()[4]);
        $(".foxtrot span").text(table.row(this).data()[5]);
        $(".golf span").text(table.row(this).data()[6]);
        $(".hotel span").text(table.row(this).data()[7]);
        $("#globesModal").modal("show");
    });

我的样本数据副本：

var grabbingData = [
{
"Alpha":"Test",
"Bravo":"Tester",
"Charlie":"Test Test",
"Delta":"Tester 2",
"Echo":"Tester3",
"Foxtrot":"Tester 4",
"Golf":"Tester 5",
"Hotel":"Tester 6"
}
];

我已经准备了一个JSFiddle，展示了我正在尝试让它工作的内容。奇怪的是，如果我将datatable从JS编译更改为在页面上嵌入静态html表格，模态框就开始正常工作了。

JSFiddle链接：https://jsfiddle.net/pixelmedia/oxem1z85/30/ 非常感谢您提供新的视角。 谢谢！

- pixelcreated

Answer 1

这是一个相当古老的帖子，但已经有超过1k的浏览量了...

为了获得此代码的可工作版本，请修改JQuery引用以直接引用字段。因此

$(".alpha span").text(table.row(this).data()[0]);

变成

 $(".alpha span").text(table.row(this).data().Alpha);

    //Modal setup:
    $('#grabbed-report tbody').on('click', 'tr', function () {
       console.log(table.row(this).data());
       
        $(".modal-body div span").text("");
        $(".alpha span").text(table.row(this).data().Alpha);
        $(".bravo span").text(table.row(this).data().Bravo);
        $(".charlie span").text(table.row(this).data().Charlie);
        $(".delta span").text(table.row(this).data().Delta).hide();
        $(".echo span").text(table.row(this).data().Echo);
        $(".foxtrot span").text(table.row(this).data().Foxtrot);
        $(".golf span").text(table.row(this).data().Golf);
        $(".hotel span").text(table.row(this).data().Hotel);
        $("#globesModal").modal("show");
    });
} );

- Norm1710