<button type="button" class="btn btn-success editbtn"> EDIT </button>
<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="updatecode.php" method="POST">
<div class="modal-body">
<input type="hidden" name="update_id" id="update_id">
<div class="form-group">
<label> First Name </label>
<input type="text" name="fname" id="fname" class="form-control"
placeholder="Enter First Name">
</div>
<div class="form-group">
<label> Last Name </label>
<input type="text" name="lname" id="lname" class="form-control"
placeholder="Enter Last Name">
</div>
<div class="form-group">
<label> Course </label>
<input type="text" name="course" id="course" class="form-control"
placeholder="Enter Course">
</div>
<div class="form-group">
<label> Phone Number </label>
<input type="text" name="contact" id="contact" class="form-control"
placeholder="Enter Phone Number">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="updatedata" class="btn btn-primary">Update Data</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.editbtn').on('click', function () {
$('#editmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#fname').val(data[1]);
$('#lname').val(data[2]);
$('#course').val(data[3]);
$('#contact').val(data[4]);
});
});
</scrip
t>
字符串
第一个代码块正在工作。但是当相同的代码应用于不同的编辑区域时,弹出窗口不会打开。
<button type="button" class="btn btn-success editbtntwo"> EDIT </button>
<div class="modal fade" id="editmodaltwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="updatecodetwo.php" method="POST">
<div class="modal-body">
<input type="hidden" name="updatetwo_id" id="updatetwo_id">
<div class="form-group">
<label> First Name </label>
<input type="text" name="fnametwo" id="fnametwo" class="form-control"
placeholder="Enter First Name">
</div>
<div class="form-group">
<label> Last Name </label>
<input type="text" name="lnametwo" id="lnametwo" class="form-control"
placeholder="Enter Last Name">
</div>
<div class="form-group">
<label> Course </label>
<input type="text" name="course" id="course" class="form-control"
placeholder="Enter Course">
</div>
<div class="form-group">
<label> Phone Number </label>
<input type="text" name="contacttwo" id="contacttwo" class="form-control"
placeholder="Enter Phone Number">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="updatedatatwo" class="btn btn-primary">Update Data</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.editbtntwo').on('click', function () {
$('#editmodaltwo').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#updatetwo_id').val(data[0]);
$('#fnametwo').val(data[1]);
$('#lnametwo').val(data[2]);
$('#coursetwo').val(data[3]);
$('#contacttwo').val(data[4]);
});
});
</scrip
t>
型
上面的代码块可以工作。下面的代码块不起作用。两者都一样。第二个代码块的弹出窗口根本不起作用。我该怎么办?我不太懂JavaScript。我需要在第二个代码块中添加或删除什么。我在不同的应用程序中遇到了类似的错误,但我找不到解决方案。为什么第一个有用,第二个不行?
1条答案
按热度按时间irlmq6kh1#
我猜你正在使用Bootstrap。如果是这样,你就不需要JS函数了。
尝试将以下属性添加到“编辑”按钮:
字符串