如何使用數據表在彈出窗口中顯示每個單元格表數據？

如何使用Datatables顯示每個單元格的表格數據的彈出窗口？如何使用數據表在彈出窗口中顯示每個單元格表數據？

在下面的腳本腳本中，我使用了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>

來源

2016-10-03 SAHO

重要提示：在添加代碼之前，請包括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>

對於DEMO：https://jsfiddle.net/dipakthoke07/t53cyutt/42/

感謝。

來源

2016-10-03 04:50:42

如果我點擊表格數據1.1應該顯示在彈出式菜單中。如何爲上面的代碼創建彈出式菜單。每個表格數據內容應當在彈出式菜單中顯示，當點擊ID完成時。@ Dipak Thoke – SAHO

@SAHO請修改你的問題。 –

我已更新我的答案。 –

如何使用數據表在彈出窗口中顯示每個單元格表數據？

回答

相關問題