在 PHP/JQUERY 中编辑动态添加的行

Question

我有使用 jquery 动态添加的行存储的 MySQL 表行。

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

在 edit.php 上接收一些 id 并在 $result 上获取 1 个或多个数据。我的问题是如何在这种类型的动态表中显示数据。我需要在不单击 addrow 按钮的情况下显示 2 行，如果单击 add row 按钮，将显示第 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>