Question

我有一个使用DataTables的HTML表。

我有给每个<tr>一个data-id属性的代码。单击<tr>时，它会打开一个与data-id相对应的模式。我想获取所选元素的值，并使用它们填充模式中的字段。但是，我还无法弄清楚如何获取元素的值。我的代码：

<table id="customers" class="table table-hover" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>
<script>
   var data = [
   [
   "Austin",
   "System Architect",
   "Edinburgh",
   "5421",
   "2011/04/25",
   "$3,120"
   ],
   [
   "Garrett Winters",
   "Director",
   "Edinburgh",
   "8422",
   "2011/07/25",
   "$5,300"
   ]
   ]
</script>
<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="infoModal" tabindex="-1" role="dialog" aria-hidden="false">
   <div class="modal-dialog ">
      <div class="modal-content-wrapper">
         <div class="modal-content">
            <div class="modal-header clearfix text-left">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
               </button>
               <h5 id="orderDetails"></h5>
               <p class="p-b-10">some text will go here</p>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-md-12">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
</div>
<!-- /.modal-dialog -->
<!-- END PLACE PAGE CONTENT HERE -->
</div>
<!-- END CONTAINER FLUID -->
</div>
<!-- END PAGE CONTENT -->
<? include 'includes/footer.php'; ?>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
<? include 'includes/scripts.php'; ?>
<!-- Activate Customer Data Table -->
<script>
   $(function(){
        $('#customers').DataTable({
          data: data,
          'createdRow': function( row, data, dataIndex ) {
                $(row).attr('data-toggle', 'modal');
             $(row).attr('data-id', + dataIndex);
             $(row).attr('data-target', '#infoModal');
            }
        });
   });
</script>
<script>
   $(function(){
       $('#infoModal').modal({
           keyboard: true,
           backdrop: "static",
           show:false,

       }).on('show.bs.modal', function(){
             var getIdFromRow = $(event.target).closest('tr').data('id');
           //make your ajax call populate items or what even you need
           $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'));
       });

   });
</script>

这是我发现的一些代码，可以满足我的要求，但是我无法弄清楚如何实现它。

$('#data-table').on('click', 'tr', function() {
    var first = $(this).find('td:eq(0)').text();
    var second = $(this).find('td:eq(1)').text();

    alert(first);
    alert(second);
});

我知道有几篇文章，其中包含有关如何获取a中a的值的信息，但我无法弄清楚在这种特定情况下如何实现它们。

Answer 1

睡觉后我能够解决这个问题。我使用最接近的jQuery，并找到以获取td的值。代码如下：

<script>
$(function(){
    $('#infoModal').modal({
        keyboard: true,
        backdrop: "static",
        show:false,

    }).on('show.bs.modal', function(){
          var getIdFromRow = $(event.target).closest('tr').data('id');
          var name = $(event.target).closest('tr').find('td:eq( 0 )').html();
          var pos = $(event.target).closest('tr').find('td:eq( 1 )').html();
        //make your ajax call populate items or what even you need
        $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'));
        $(this).find('#name').text(name);
        $(this).find('#pos').text(pos);
    });

});
</script>

使用以下值填充模式

1 个答案: