Заполните модальные значения от <tr>

Question

У меня есть таблица HTML с использованием DataTables.

У меня есть код, который присваивает каждому атрибуту <tr> a 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 ближайший и найти, чтобы получить значения тд.Код ниже:

<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>