如何使用数据表在弹出窗口中显示每个单元格表数据？答案

【问题标题】：How to show each cell table data in popup window using datatables?如何使用数据表在弹出窗口中显示每个单元格表数据？
【发布时间】：2016-10-03 04:15:50
【问题描述】：

如何使用 Datatables 显示每个单元格及其表格数据的弹出窗口？

在下面的脚本脚本中，我使用了数据表插件和警报来显示每个单元格的弹出窗口，但没有得到正确的输出？当在每个单元格？

 <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    </head>
    <table border="1" align="center" id="example" class="display"  width="100%">
    <thead>
    <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    </tr>
    <tr>
    <td>3</td>
    <td>6</td>
    <td>9</td>
    <td>7</td>
    <td>12</td>
    </tr>
    </tbody>
    <script>
    $(document).ready(function()
    {
    $('#example tbody').click( function () {
      alert("test") ;
    });
    });
    </script>
    </table>
    </html>

【问题讨论】：

标签： datatables

【解决方案1】：

重要提示：在添加代码之前，请在您的页面中包含 js && css，请参阅使用小提琴外部资源部分的 js。

将您的点击功能修改为点击功能。

Javascript：

$(document).ready(function () {
  var companyTable=  $('#jobs').DataTable();   
    $('#jobs').on('click', 'tr', function () {
      $("#company-full-name").val(companyTable.row(this).data()[1]);
      $("#company-short-name").val(companyTable.row(this).data()[2]);
      $('#DescModal').modal("show");
    });
});

HTML：

<div class="panel panel-info">
    <div class="panel-heading">
         <h3 class="panel-title">On click row  popup will get open </h3>

    </div>
    <table id="jobs" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Job Title</th>
                <th>Company</th>
                <th>Salary</th>
                <th>Location</th>
                <th>Date Posted</th>
            </tr>
        </thead>
        <tbody>
            <!--Made it easier, so no more redundant copypasta in other pages-->
            <tr>
                <td>1</td>
                <td>VP Marketing</td>
                <td>Devify</td>
                <td>22.38</td>
                <td>222 Lillian Hill</td>
                <td>2015-02-17</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Administrative</td>
                <td>Skiba</td>
                <td>10.92</td>
                <td>3 Corscot Terrace</td>
                <td>2015-02-03</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Database Admini</td>
                <td>Dynazzy</td>
                <td>36.72</td>
                <td>5082 Butterfield Ter</td>
                <td>2015-01-30</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Quality Control</td>
                <td>Realmix</td>
                <td>23.48</td>
                <td>598 Independence Cir</td>
                <td>2015-02-19</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Health Coach II</td>
                <td>Linkbuzz</td>
                <td>17.11</td>
                <td>18 Donald Plaza</td>
                <td>2015-02-17</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Biostatistician</td>
                <td>Roomm</td>
                <td>36.37</td>
                <td>3 Almo Terrace</td>
                <td>2015-02-16</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Assistant Profe</td>
                <td>Shufflester</td>
                <td>29.43</td>
                <td>640 Towne Terrace</td>
                <td>2015-02-13</td>
            </tr>
            <tr>
                <td>8</td>
                <td>Analog Circuit</td>
                <td>Tagcat</td>
                <td>25.66</td>
                <td>316 Claremont Road</td>
                <td>2015-02-21</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Structural Engi</td>
                <td>Tagchat</td>
                <td>35.55</td>
                <td>809 Butterfield Park</td>
                <td>2015-02-10</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Senior Develope</td>
                <td>Browsecat</td>
                <td>21.62</td>
                <td>5 Sachs Court</td>
                <td>2015-01-30</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Human Resources</td>
                <td>Jaxbean</td>
                <td>32.00</td>
                <td>6 Corscot Street</td>
                <td>2015-02-10</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Analyst Program</td>
                <td>Jetpulse</td>
                <td>28.13</td>
                <td>30 Eggendart Place</td>
                <td>2015-02-20</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="modal fade" id="DescModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
                 <h3 class="modal-title">Job Requirements & Description</h3>

            </div>
            <div class="modal-body">

            <div class="row dataTable">
                                                <div class="col-md-4">
                                                    <label class="control-label">job title</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" maxlength="50" id="company-full-name" name="companyFullName">
                                                </div>
                                            </div>

                                            <br>

                                            <div class="row dataTable">
                                                <div class="col-md-4">
                                                    <label class="control-label">Company</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" maxlength="30" id="company-short-name" name="companyShortName">
                                                </div>
                                            </div>
                              <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
                <button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS：

<style type="text/css" class="init"> body {
       font-size: 140%;
   }
   </style>

对于演示：https://jsfiddle.net/dipakthoke07/t53cyutt/42/

谢谢。

【讨论】：

如果我点击表格数据 1 .1 应该显示在弹出菜单中。如何为上面的代码创建弹出菜单。点击 id done 时每个表格数据内容都应该显示在弹出窗口中。@ Dipak托克
@SAHO 请修改您的问题。
你能链接到 jsfiddle 页面吗@Dipak Thoke
jsfiddle.net/dipakthoke07/891mdyvy/17 此示例代码与您遵循此代码不完全相同。
@SAHO 很抱歉回复晚了，这是您的问题的解决方案。谢谢你！