javascript - 在 PHP/JQUERY 中编辑动态添加的行
问题描述
我有使用 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"> </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"> </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"> </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 行。在这种情况下有人可以帮忙吗？
解决方案
我不知道我是否理解了这个问题，但是我这样做了，它得到了两行，将您的函数分开以创建一个新的，并且不使用您正在使用的隐藏字段：
<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"> </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"> </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"> </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>
推荐阅读
- python - 为什么 azure-sdk-for-python 返回对象
- intellij-idea - 如何在评论后阻止 CLion 双重缩进？
- java - 如何在按钮上方制作视图（最小 SDK：17）
- javascript - DOM 事件 API JavaScript
- c++ - 如何在 CImg 中将像素数据作为矩阵/向量获取？
- mysql - 下面的mysql查询有什么问题
- r - 如果满足另一行的条件，则删除组内的行
- java - spring security 没有调用 loadUserByUsername() 方法
- scala - UDF Scala 火花语法
- python - 下载文件时的Python多处理比正常实现慢