如何使用datatables在弹出窗口中显示每个单元格表数据？
如何使用Datatables显示每个单元格的弹出窗口及其表数据 在下面的脚本脚本中，我使用了datatables插件和alert来显示每个单元格的弹出窗口，但没有得到正确的输出？当在每个单元格中单击鼠标时，如何修改脚本以在弹出窗口中显示每个单元格的数据如何使用datatables在弹出窗口中显示每个单元格表数据？,datatables,Datatables,如何使用Datatables显示每个单元格的弹出窗口及其表数据 在下面的脚本脚本中，我使用了datatables插件和alert来显示每个单元格的弹出窗口，但没有得到正确的输出？当在每个单元格中单击鼠标时，如何修改脚本以在弹出窗口中显示每个单元格的数据 A. B C D E 1. 2. 3. 4. 5. 3. 6. 9 7. 12 $（文档）.ready（函数（） { $（“#示例tbody”）。单击（函数（）{ 警报（“测试”）； }); }); 重要提示：在添加代码之前，请在页面中包含j
A.
B
C
D
E
1.
2.
3.
4.
5.
3.
6.
9
7.
12
$（文档）.ready（函数（）
{
$（“#示例tbody”）。单击（函数（）{
警报（“测试”）；
});
});
$(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");
});
});
单击“行”弹出窗口将打开
#
职位名称
单位
薪水
位置
公布日期
1.
市场副总裁
歪曲
22.38
222莉莉安山
2015-02-17
2.
行政的
希巴
10.92
科斯科台3号
2015-02-03
3.
数据库管理员
Dynazzy
36.72
5082巴特菲尔德酒店
2015-01-30
4.
质量控制
Realmix
23.48
598独立委员会
2015-02-19
5.
二级健康教练
林巴斯
17.11
唐纳德广场18号
2015-02-17
6.
生物统计学家
室友
36.37
阿尔莫台3号
2015-02-16
7.
助理教授
沙狐酯
29.43
汤恩台640号
2015-02-13
8.
模拟电路
标语牌
25.66
克莱蒙特道316号
2015-02-21
9
结构工程
塔查特
35.55
巴特菲尔德公园809号
2015-02-10
10
高级开发人员
布朗塞卡特
21.62
5萨克斯法院
2015-01-30
11
人力资源
菜豆
32
科斯科特街6号
2015-02-10
12
分析程序
喷射脉冲
28.13
埃根达特广场30号
2015-02-20
�
工作要求和说明
职位名称
单位
申请！
接近
正文{
字体大小：140%；
}
谢谢。如果我单击表格数据，1.1应显示在弹出菜单中。如何为上述代码创建弹出菜单。单击“id完成”时，每个表格数据内容应显示在弹出菜单中。@DipakThoke@SAHO请修改你的问题。你能链接到JSFIDLE吗page@Dipak如果您遵循此代码，则此示例代码可能不准确。@SAHO很抱歉，回复太晚，这是您的问题的解决方案。谢谢你！
<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 -->
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>