jquery - 我正在使用 JQuery 从模式输入中更新表行值,但我遇到了一个小问题。任何人都可以看看并提供一些建议吗?
问题描述
我的更新/编辑表功能遇到了一个奇怪的问题。该功能似乎适用于 1 行,但是当我添加超过 1 行时,我得到了问题。最近的行值被复制到模式中,而不是该行的值。然后更新该行会更新该行和第一行。我现在对这个问题很困惑。
任何人都可以对这件事有所了解吗?我确定这是一个逻辑问题。
行是从“添加到表”按钮添加的,该按钮在单击时调用函数。
function editRow()
{
$("#myTable tbody").on('click', '#edit', function (x) {
let row = x.target.parentNode.parentNode;
let name = $('#Name').val();//row.cells[1].textContent;
let surname = $('#Surname').val(); //row.cells[2].textContent;
console.log(row);
console.log("Original name: " + name);
console.log("Original surname: " + surname);//same thing
//set edit modal values
let edit_modal_name = $('#edit_Name').val(name);
let edit_modal_surname = $('#edit_Surname').val(surname);
console.log("Edit modal name: " + edit_modal_name.val());
console.log("Edit modal surname: " + edit_modal_surname.val());
$('#edit_modal').modal('show');
$('#save_btn_edit').click(function () {
row.cells[1].textContent = $('#edit_Name').val();
row.cells[2].textContent = $('#edit_Surname').val();
console.log(row);
})
});
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/index.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Homework 2</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#myModal">Add to Table</button>
</div>
</div>
<table id="myTable" class="table table-dark myTable">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- Add modal -->
<div class="modal fade" id="myModal" 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">Add Data to Table</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label id="Image_input" for="Image" class="col-form-label">Image:</label>
<input type="file" class="form-control" id="Image">
</div>
<div class="form-group">
<label id="name_input" for="Name" class="col-form-label">Name:</label>
<input type="text" class="form-control" id="Name">
</div>
<div class="form-group">
<label id="surname_input" for="Surname" class="col-form-label">Surname:</label>
<input type="text" class="form-control" id="Surname">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save_btn" type="button" class="btn btn-primary " data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<!-- Delete modal -->
<div class="modal" id="delete_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Row</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this row?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="delete_row_btn" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="edit_modal" 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="title">Edit Row Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label id="edit_Image_input" for="Image" class="col-form-label">Image:</label>
<input type="file" class="form-control" id="edit_Image">
</div>
<div class="form-group">
<label id="edit_name_input" for="Name" class="col-form-label">Name:</label>
<input type="text" class="form-control" id="edit_Name">
</div>
<div class="form-group">
<label id="edit_surname_input" for="Surname" class="col-form-label">Surname:</label>
<input type="text" class="form-control" id="edit_Surname">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save_btn_edit" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</html>
解决方案
推荐阅读
- powerapps - 如何根据与多列比较的一个下拉列表过滤 powerapps 数据库
- excel - 将 .mht 转换为 .pdf 文件和清除内存的问题
- mysql - 查找表在 2019 年是一种良好的数据库实践吗?
- pyspark - 使用 pyspark 将 KMS 加密的 spark 数据帧读取和写入到 S3 存储桶时出现问题
- docusignapi - 如何获得签名(模板派生)信封的非扁平 PDF 输出?
- php - 对于内部使用的 PHP 站点(没有框架),PDO + htaccess 是否足以阻止大多数攻击?
- gremlin - 使用带有spring-boot的gremlin存储顶点和边时出错
- google-kubernetes-engine - 由于主机名不匹配,长时间运行的 Airflow 任务被错误地标记为失败
- python - 当字段中缺少值时,Python将行插入数据框
- php - 为什么我的更新(补丁请求)不会在 laravel 中保存任何内容?