[英]Javascript button delete and edit
我可以很好地添加用戶,但是當我嘗試刪除或編輯某人時,我的按鈕不起作用。 我試圖發出警報,看看出了什么問題,但我找不到任何東西。
如您所見,當您將某人添加到表格時,它會創建按鈕刪除和編輯。
這是我的js代碼:
var nextId = 1;
var activeId = 0;
$(document).ready(function() {
$("#addBtn").on("click", function() {
var name = $("#txtNome").val();
if (name.trim().length < 3 || $("#txtIdade").val() == "") {
alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
$("#txtNome").focus();
return false;
} else {
addt();
formClear();
}
});
$("#btnDelete").on("click", function(delete_button) {
$(delete_button).parents("tr").remove();
});
$("#btnEdit").click(function() {
var row = $(edit_button).parents("tr");
var cols = row.children("td");
activeId = $($(cols[2]).children("button")[0]).data("id");
$("#txtNome").val($(cols[0]).text());
$("#txtIdade").val($(cols[1]).text());
$("#edt").css("display", "inline-block");
$("#addBtn").prop("disabled", true);
})
function addt() {
if ($("#tblUser tbody").length == 0) {
$("#tblUser").append("<tbody></tbody>");
}
$("#tblUser tbody").append(addUserToTable(nextId));
nextId += 1;
}
function addUserToTable(id) {
var row =
"<tr>" +
"<td>" + $("#txtNome").val() + "</td>" +
"<td>" + $("#txtIdade").val() + "</td>" +
"<td>" +
"<button type='button' style='margin-right:20px;' " + "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
"</button>" +
"<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
"</button>" +
"</td>" +
"</tr>"
return row;
nextId += 1;
}
function formClear() {
$("#txtNome").val("");
$("#txtIdade").val("");
}
function attTable(id) {
var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];
$(row).after(addUserToTable());
$(row).remove();
formClear();
$("#edt").css("display", "none");
}
});
當您將字符串內容(以 HTML 形式)添加到表格時,這些是文檔的新內容,並且 Jquery 在頁面加載時綁定了所有事件,
因此,當您向表中添加動態內容時,您明確需要將事件綁定到 DOM 元素(在您的情況下是編輯和刪除按鈕)
請嘗試以下代碼,
<script>
var nextId = 1;
var activeId = 0;
$(document).ready(function(){
$("#addBtn").on("click",function(){
var name = $("#txtNome").val();
if (name.trim().length < 3 || $("#txtIdade").val() == "") {
alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
$("#txtNome").focus();
return false;
} else {
addt();
formClear();
}
});
$("#btnDelete").on("click",deletebutton);
function deletebutton(){
$(this).parents("tr").remove();
}
$("#btnEdit").click(editButton);
function editButton(){
var row = $(this).parents("tr");
var cols = row.children("td");
activeId = $($(cols[2]).children("button")[0]).data("id");
$("#txtNome").val($(cols[0]).text());
$("#txtIdade").val($(cols[1]).text());
$("#edt").css("display", "inline-block");
$("#addBtn").prop("disabled" , true);
}
function addt(){
if ($("#tblUser tbody").length == 0) {
$("#tblUser").append("<tbody></tbody>");
}
var btn = $(addUserToTable(nextId));
$(btn).find("#btnEdit").bind('click', editButton);
$(btn).find("#btnDelete").bind('click', deletebutton);
$("#tblUser tbody").append($(btn));
nextId += 1;
}
function addUserToTable(id) {
var row =
"<tr>" +
"<td>" + $("#txtNome").val() + "</td>" +
"<td>" + $("#txtIdade").val() + "</td>" +
"<td>" +
"<button type='button' style='margin-right:20px;' " + "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
"Edit </button>" +
"<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
"Delete</button>" +
"</td>" +
"</tr>"
return row;
nextId += 1;
}
function formClear() {
$("#txtNome").val("");
$("#txtIdade").val("");
}
function attTable(id) {
var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];
$(row).after(addUserToTable());
$(row).remove();
formClear();
$("#edt").css("display", "none");
}
});
</script>
我希望這能解決你的問題
我曾嘗試使用以下 HTML 內容
<table id="tblUser"></table>
<input type="button" id="addBtn" value="addBtn"/><br/>
<input type="button" id="btnDelete" value="btnDelete"/><br/>
<input type="button" id="btnEdit" value="btnEdit"/><br/>
txtNome: <input type="text" id="txtNome" value="Name 1" /><br/>
txtIdade: <input type="text" id="txtIdade" value="Name 2"/><br/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.