Редактировать динамически добавленные строки в PHP / JQUERY

Question

У меня MySQL строк таблицы, сохраненных динамически добавленными строками с использованием jquery.

<table class="table table-responsive table-bordered add-passenger">
          <tr>
              <td>S.No</td>
              <td>Given Name</td>
              <td>SurName</td>
              <td>DOB</td>
              <td>Gender</td>
              <td>Room Type</td>
              <td>Meal Type</td>
              <td>Aadhar No</td>
              <td>PAN No</td>
              <td>Passport No</td>
              <td>Passport Expiry</td>
              <td>Photo</td>
              <td>Old PP</td>
              <td>New PP</td>
              <td>PAN Card</td>
              <td>Aadhar Card</td>
              <td>Delete</td>
          </tr>
<script>
$(document).ready(function () {
    var counter = 1;
    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input readonly type="text" class="" value="' + counter + '" name="sno' + counter + '"/></td>';
        cols += '<td><input type="text" class="" required name="given_name' + counter + '"/></td>';
        cols += '<td><input type="text" class="" required name="surname' + counter + '"/></td>';
        cols += '<td><input type="date" class="" required name="dob' + counter + '"/></td>';
        cols += '<td><select class="" required name="gender' + counter + '"><option value="none">&nbsp;</option><option value="male">M</option><option value="female">F</option><option value="transgender">T</option></select></td>';
        cols += '<td><select class="" name="room_type' + counter + '"><option value="none">&nbsp;</option><option value="single">S</option><option value="double">D</option><option value="triple">TR</option><option value="twinshare">TW</option></select></td>';
        cols += '<td><select class="" name="meal_type' + counter + '"><option value="none">&nbsp;</option><option value="V">V</option><option value="N">N</option></select></td>';
        cols += '<td><input type="text" class="" name="aadhar_no' + counter + '"/></td>';
        cols += '<td><input type="text" class="" name="pan_no' + counter + '"/></td>';
        cols += '<td><input type="text" class="" name="passport_no' + counter + '"/></td>';
        cols += '<td><input type="date" class="" name="passport_expiry_date' + counter + '"/></td>';
        cols += '<td><input type="hidden" name="photo' + counter + '" value="0"><input type="checkbox" name="photo' + counter + '" value="1"/></td>';
        cols += '<td><input type="hidden" name="old_PP' + counter + '" value="0"><input type="checkbox" name="old_PP' + counter + '" value="1"/></td>';
        cols += '<td><input type="hidden" name="new_PP' + counter + '" value="0"><input type="checkbox" name="new_PP' + counter + '" value="1"/></td>';
        cols += '<td><input type="hidden" name="PAN_card' + counter + '" value="0"><input type="checkbox" name="PAN_card' + counter + '" value="1"/></td>';
        cols += '<td><input type="hidden" name="aadhar_card' + counter + '" value="0"><input type="checkbox" name="aadhar_card' + counter + '" value="1"/></td>';
        cols += '<td><input type="button" class="ibtnDel btn btn-sm btn-danger" value="x"></td>';
        newRow.append(cols);
        $("table.add-passenger").append(newRow);
        counter++;
        $("#hiddenCounter").val(counter);
    });

    $("table.add-passenger").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();   
        counter--;
         $("#hiddenCounter").val(counter);    
    });


});

function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
<input type="button" class="btn btn-success" id="addrow" value="Add Row"/>
<input type="hidden" id="hiddenCounter" name="hiddenCounter"/>
<br><br>
</table>

при редактировании. php получает некоторый идентификатор и получает 1 или более данных о $ result. У меня вопрос, как показать данные в этом типе таблицы Dynami c. Мне нужно показать 2 строки, не нажимая кнопку добавления, если кнопка добавления строки нажимает 3-й ряд будет отображаться. может кто-то помочь в этом случае?

Answer 1

Я не знаю, понял ли я проблему, но я сделал это, и он получает две строки, разделяет вашу функцию для создания новой и не использует то скрытое поле, которое вы использовали:

<table class="table table-responsive table-bordered add-passenger">
      <tr>
          <td>S.No</td>
          <td>Given Name</td>
          <td>SurName</td>
          <td>DOB</td>
          <td>Gender</td>
          <td>Room Type</td>
          <td>Meal Type</td>
          <td>Aadhar No</td>
          <td>PAN No</td>
          <td>Passport No</td>
          <td>Passport Expiry</td>
          <td>Photo</td>
          <td>Old PP</td>
          <td>New PP</td>
          <td>PAN Card</td>
          <td>Aadhar Card</td>
          <td>Delete</td>
      </tr>
<script>
var counter = 1; //global var to not use that hidden input
var initial_rows = 2; //var that controls initial rows numbers
$(document).ready(function () {
  for (i = 0; i < initial_rows; i++) {
  addNewRow(); //load 2 columns at first
} 

$("#addrow").on("click", addNewRow); //using new function I created

$("table.add-passenger").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();   
    window.counter--;
     // $("#hiddenCounter").val(window.counter);    
});


});
function addNewRow(){ //new function in order to use it in the initial setup and the click event
var newRow = $("<tr>");
var cols = "";
cols += '<td><input readonly type="text" class="" value="' + window.counter + '" name="sno' + window.counter + '"/></td>';
cols += '<td><input type="text" class="" required name="given_name' + window.counter + '"/></td>';
cols += '<td><input type="text" class="" required name="surname' + window.counter + '"/></td>';
cols += '<td><input type="date" class="" required name="dob' + window.counter + '"/></td>';
cols += '<td><select class="" required name="gender' + window.counter + '"><option value="none">&nbsp;</option><option value="male">M</option><option value="female">F</option><option value="transgender">T</option></select></td>';
cols += '<td><select class="" name="room_type' + window.counter + '"><option value="none">&nbsp;</option><option value="single">S</option><option value="double">D</option><option value="triple">TR</option><option value="twinshare">TW</option></select></td>';
cols += '<td><select class="" name="meal_type' + window.counter + '"><option value="none">&nbsp;</option><option value="V">V</option><option value="N">N</option></select></td>';
cols += '<td><input type="text" class="" name="aadhar_no' + window.counter + '"/></td>';
cols += '<td><input type="text" class="" name="pan_no' + window.counter + '"/></td>';
cols += '<td><input type="text" class="" name="passport_no' + window.counter + '"/></td>';
cols += '<td><input type="date" class="" name="passport_expiry_date' + window.counter + '"/></td>';
cols += '<td><input type="hidden" name="photo' + window.counter + '" value="0"><input type="checkbox" name="photo' + window.counter + '" value="1"/></td>';
cols += '<td><input type="hidden" name="old_PP' + window.counter + '" value="0"><input type="checkbox" name="old_PP' + window.counter + '" value="1"/></td>';
cols += '<td><input type="hidden" name="new_PP' + window.counter + '" value="0"><input type="checkbox" name="new_PP' + window.counter + '" value="1"/></td>';
cols += '<td><input type="hidden" name="PAN_card' + window.counter + '" value="0"><input type="checkbox" name="PAN_card' + window.counter + '" value="1"/></td>';
cols += '<td><input type="hidden" name="aadhar_card' + window.counter + '" value="0"><input type="checkbox" name="aadhar_card' + window.counter + '" value="1"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-sm btn-danger"value="x"></td>';
newRow.append(cols);
$("table.add-passenger").append(newRow);
window.counter++;
// $("#hiddenCounter").val(window.counter);
 }
 function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();

 }

 function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
    grandTotal += +$(this).val();
     });
$("#grandtotal").text(grandTotal.toFixed(2));
 }
 </script>
 <input type="button" class="btn btn-success" id="addrow" value="Add Row"/>
 <!-- we dont need this anymore with global <input type="hidden" id="hiddenCounter" name="hiddenCounter"/> -->
 <br><br>
 </table>