Как использовать jquery для цикла в строках таблицы, эхом отданных php, и выбрать определенную строку, где встречается свойство

Question

У меня есть таблица, динамически созданная из базы данных Mysql. Я пытаюсь создать модальное диалоговое окно, в котором, если пользователь нажимает на кнопку просмотра, отображается всплывающее окно с указанием значений этой конкретной строки. Как выполнить цикл в таблице и выбрать определенную строку с помощью jquery? Я использую Javascript-библиотеку, называемую bootbox.js. Я могу отображать всплывающее окно, но я не могу его отобразить в соответствующей строке, вместо этого отображает только первую строку. Соответствующий PHP и код Javascript Я попытался показано ниже

echo "<table class='table table-hover table-responsive table-bordered'>"; 
    echo "<tr>"; 
     echo "<th>Payment Supplier</th>"; 
     echo "<th>Payment Reference</th>"; 
     echo "<th>Payment Cost rating</th>"; 
     echo "<th>Payment Amount</th>"; 
     echo "<th>Actions</th>"; 
    echo "</tr>"; 

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ 

     extract($row); 

     echo "<tr>"; 

      echo "<td>{$payment_supplier}</td>"; 
      echo "<td>{$payment_ref}</td>"; 
      echo "<td>{$payment_cost_rating}</td>"; 
      echo "<td>{$payment_amount}</td>"; 
      ?> 
      <div id="dom-target" style="display: none;"> 
       <?php 
       $output = $payment_supplier; //Again, do some operation, get the output. 
       echo htmlspecialchars($output); /* You have to escape because the result 
             will not be valid HTML otherwise. */ 
       ?> 

       </div> 
       <?php 
      echo "<td>"; 

       echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>"; 
       echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>"; 
       echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>"; 
      echo "</td>"; 

     echo "</tr>"; 

     $x++; 
    } 

echo "</table>"; 

код Javascript является

<script> 
$(document).on('click', '.view-object', function(e) { 

     var div = document.getElementById("dom-target"); 
     var myData = div.textContent; 

     bootbox.alert(myData, function() { 
      console.log("Alert Callback"); 
     }); 
    }); 
</script> 

Что я здесь отсутствует или есть лучший способ для достижения этой цели?

Answer 1

Как вы уже сказали, ваш код отображает только первую строку.

Это связано с тем, что вы не установили разные уникальные идентификаторы для каждой строки div, отображаемой по щелчку.

Попробуйте использовать код, как:

echo "<table class='table table-hover table-responsive table-bordered'>"; 
      echo "<tr>"; 
       echo "<th>Payment Supplier</th>"; 
       echo "<th>Payment Reference</th>"; 
       echo "<th>Payment Cost rating</th>"; 
       echo "<th>Payment Amount</th>"; 
       echo "<th>Actions</th>"; 
      echo "</tr>"; 

      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ 

       extract($row); 

       echo "<tr>"; 

        echo "<td>{$payment_supplier}</td>"; 
        echo "<td>{$payment_ref}</td>"; 
        echo "<td>{$payment_cost_rating}</td>"; 
        echo "<td>{$payment_amount}</td>"; 

        //SET THE UNIQUE ID OF DIV TO SHOW ON CLICK OF VIEW// 
        ?> 
        <div id="dom-target-<?php echo $payment_id;?>" style="display: none;"> 
         <?php 
         $output = $payment_supplier; //Again, do some operation, get the output. 
         echo htmlspecialchars($output); /* You have to escape because the result 
               will not be valid HTML otherwise. */ 
         ?> 

         </div> 
         <?php 
        echo "<td>"; 

         echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>"; 
         echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>"; 
         echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>"; 
        echo "</td>"; 

       echo "</tr>"; 

       $x++; 
      } 

     echo "</table>"; 

JS:

 <script> 
     $(document).on('click', '.view-object', function(e) { 

       selectedId=$(this).attr('view-id');   //GET SELECTED ROW ID FROM ANCHOR TAG 

       var div = document.getElementById("dom-target-"+selectedId);  //CALL THE SELECTED ROW DIV TO POP UP 
       var myData = div.textContent; 

       bootbox.alert(myData, function() { 
        console.log("Alert Callback"); 
       }); 
      }); 
     </script> 

Это может поможет.

Answer 2

попробовать это ...

<script> 
$(document).on('click', '.view-object', function(e) { 

     bootbox.alert($(this).val(), function() { 
     console.log("Alert Callback"); 
    }); 
}); 
</script> 

Answer 3

Есть две основные проблемы, связанные с вашим сценарием:

1. Вы рециркуляцию dom-target ID. Помните, что идентификаторы должны быть уникальными в вашем документе HTML. Вместо этого вы можете изменить его из ID в класс.
2. <div> не является действительным ребенком <tr>. Браузеры попытаются исправить это, что может включать элемент, удаляемый из таблицы, или секвестрированный в <td>.
3. В вашей функции отсутствует контекст - при нажатии на кнопку .view-object вам необходимо ссылаться на текущий элемент, из которого произошло событие. Используя $(this), вы укажете в правильном направлении.

Я предлагаю вам сохранить значение в dom-output как HTML5 data- атрибут, связанный с конкретной строки, то есть, вместо:

echo "<tr>"; 

     echo "<td>{$payment_supplier}</td>"; 
     echo "<td>{$payment_ref}</td>"; 
     echo "<td>{$payment_cost_rating}</td>"; 
     echo "<td>{$payment_amount}</td>"; 
     ?> 
     <div id="dom-target" style="display: none;"> 
      <?php 
      $output = $payment_supplier; //Again, do some operation, get the output. 
      echo htmlspecialchars($output); /* You have to escape because the result 
            will not be valid HTML otherwise. */ 
      ?> 

      </div> 

использование:

echo "<tr data-domtarget='".htmlspecialchars($payment_supplier)."'>"; 

     echo "<td>{$payment_supplier}</td>"; 
     echo "<td>{$payment_ref}</td>"; 
     echo "<td>{$payment_cost_rating}</td>"; 
     echo "<td>{$payment_amount}</td>"; 
     ?> 

Вы можете использовать следующий сценарий:

$(document).on('click', '.view-object', function() { 
    var domTarget = $(this).closest('tr').data('domtarget'); 
    bootbox.alert(domTarget, function() { 
     console.log("Alert Callback"); 
    }); 
});