我被要求制作一个程序,它从一个模态中获取输入,并将其放入一个表中。每一行都需要有一个编辑和删除图标(使用FontAwesome)。对于这个问题的上下文,我主要关注删除图标/按钮。目前,删除图标需要是一个按钮,一旦按下该按钮,就会显示一个模式,询问用户是否确定要删除行中的信息。模式将包含两个按钮,让用户可以选择采取两个操作之一,(是按钮-删除行及其所有内容;否按钮-简单地关闭模式)。下面我给出了jQuery代码(需要用jQuery编写),到目前为止,我的代码将图标显示为按钮,一旦单击删除图标/按钮,该行就会被删除,但只有在那时才会显示模式。(目前,该模式没有功能,即。这些按钮不做任何事情)。
jQuery:
function deleteData(btnDelete) {
$(btnDelete).parents("tr").remove();
}
function openModal() {
$('#modalDelete').show();
}
//function that adds input values to the table
function addToTable() {
//add tbody tag if one is not present
if($("#inputTable tBody").length == 0) {
$("#inputTable").append("<tbody></tbody>");
}
$(function() {
$('#insertImage').on('change', function()
{
var filePath = $(this).val();
console.log(filePath);
});
});
//append inputs to the Table
$("#inputTable tbody").append(
"<tr>" +
"<td>" + + "</td>" +
"<td>" + $("#addName").val() + "</td>" +
"<td>" + $("#addSurname").val() + "</td>" +
"<td>" +
"<button type='button' " +
"class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
"<td>" +
"<button type='button' " +
"onclick='deleteData(this); openModal();'" +
"class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
"</button>" +
"</td>" +
"</tr>"
);
}
//add the inputed content to the table
$("#addToTable").click(function(){
addToTable();
});
HTML (表格):
<div class="modal fade" id="addDataToTable" tabindex="-1" role="dialog" aria-labelledby="website" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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 class="" action="index.html" method="post">
<form>
<div class="form-group">
<label for="insertImage">Insert Image</label>
<input type="file" class="form-control-file" id="InsertImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
</div>
<div class="form-group">
<label for="addName">Name</label>
<input type="text" class="form-control" id="addName">
</div>
<div class="form-group">
<label for="addSurname">Surname</label>
<input type="text" class="form-control" id="addSurname">
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addToTable">Add to Table</button>
</div>
</div>
</div>
</div>
HTML (删除模式):
<div class="modal" tabindex="-1" role="dialog" id="modalDelete">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<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?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
任何帮助都将不胜感激!
发布于 2020-03-06 17:52:10
这是一个纯javascript的解决方案:
var delete = confirm("Are you sure you want to delete this row?");
if (delete ) {
//code to delete
}
https://stackoverflow.com/questions/60569056
复制相似问题