[英]Delete A Record From Dynamic table using javascript
我已經在C＃+ Mongodb中使用以下代碼生成了動態表
for (var i = 0; i < data.length; i++) {
strData += "<tr>\
<td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
<td><input type='button' id='delete' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord()'></td>\
<td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
</tr>";
}
//$("#data").append(tabelHerader);
$("#data").html(strData);
現在我要刪除記錄，當我單擊“刪除”按鈕時，將執行以下功能
function deleteRecord() {
var sid = $("#delete").attr("sid");
alert(sid);
// console.log("yes we are in");
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home.aspx/deleteData',
data: "{'id':'" + sid + "'}",
async: false,
success: function (response) {
alert("you have successfully deleted record");
},
error: function () {
console.log('there is some error');
}
});
}
但是問題是，當我單擊“刪除”按鈕時，每條記錄都會得到相同的ID，因此，如果單擊“任何按鈕”，則只會刪除第一條記錄。 有人有解決方案嗎？
每個元素使用類的ID必須唯一，而不是ID，或者僅將ID傳遞給函數，如下所示
for (var i = 0; i < data.length; i++) {
var sid = data[i].sid;
strData += "<tr>\
<td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
<td><input type='button' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord("+ sid +")'></td>\
<td><input type='button' value='update' sid='" + data[i].sid + "' onclick='updateRecord("+ sid +");'></td>\
</tr>";
}
//$("#data").append(tabelHerader);
$("#data").html(strData);
並在您的更新記錄或刪除記錄功能中執行以下操作
function deleteRecord(sid) {
alert(sid);
// console.log("yes we are in");
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home.aspx/deleteData',
data: "{'id':'" + sid + "'}",
async: false,
success: function (response) {
alert("you have successfully deleted record");
},
error: function () {
console.log('there is some error');
}
});
}
首先，您需要更改函數，在函數中添加1個參數
function deleteRecord(id) {
然后將var sid值更改為var sid = id;
使用onclick ，您可以使用
onclick="deleteRecord(pass_some_id from data[i].sid)"
如果沒有onclick ，則var sid = $("#delete").attr("sid"); 將從輸入列表中選擇第一個sid屬性值，所以您需要的是
$("#delete").each(function(){
$(this).onclick(function(){
var sid = $(this).attr("sid"); // get attr value from specify clicked button
deleteRecord(sid); // call delete record with specify id
})
})
或簡單的方式 ：
更改
var sid = $("#delete").attr("sid");
至
var sid = $(this).attr("sid"); // select attribute value from current clicked element
來自@lukesUbuntu的完整示例 ：
https://jsfiddle.net/mvLwymvb/
這里有一些很好的參考：
您可以附加的價值i用的ID和onclick可以使用通過上下文this
"<tr>" +
"<td>" + data[i].sid + "</td>" +
"<td> " + data[i].fname + " </td>" +
"<td>" + data[i].lname + "</td>" +
"<td>" + data[i].email + "</td>" +
"<td>" + data[i].pass + "</td>" +
"<td>" + data[i].address + "</td>" +
"<td><input type='button' id='delete_'"+i+" value='delete' " +
// ^ changed here
"sid='" + data[i].sid + "' onclick='deleteRecord(this)'></td>" +
"<td><input type='button' id='update_'"+i+" value='update'" +
// ^ Changed here
" sid='" + data[i].sid + "' onclick='updateRecord(this);'></td>" +
"</tr>";
在deleteRecord函數中
function deleteRecord(elem){
var getId = elem.id // id of the clicked element
}
這里的工作示例https://jsfiddle.net/mvLwymvb/1/
for (var i = 0; i < data.length; i++) {
strData += "<tr>\
<td>" + data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
<td><input class='delete' type='button' id='delete' value='delete' sid='" + data[i].sid + "'></td>\
<td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
</tr>";
}
//$("#data").append(tabelHerader);
$("#data").html(strData);
$(".delete").click(function() {
var sid = $(this).attr("sid");
alert(sid);
// console.log("yes we are in");
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home.aspx/deleteData',
data: "{'id':'" + sid + "'}",
async: false,
success: function(response) {
alert("you have successfully deleted record");
},
error: function() {
console.log('there is some error');
}
});
})
不要搞亂原生JavaScript和jQuery。 稍后您會感到困惑。
首先，在使用jQuery時不要進行內聯onclick，而應使用$(elem).click(function) 。
第二個id必須是唯一的（1個ID必須只能由1個元素使用）， class是常規的（1個類可以由多個元素使用）。
嘗試編輯此行
...
<td><input type='button' id='delete' value='delete' class="btn-delete" sid='" + data[i].sid + "' ></td>\
...
和你的劇本
<script>
$(function(){
$('body').on('click', '.btn-delete', function(){
var sid = $(this).attr("sid");
var tr = $(this).closest('tr');
//alert(sid);
$.ajax({
type: 'POST',
dataType: 'json',
url: 'Home.aspx/deleteData',
data: {id: sid},
//async: false, why you need to do this????
success: function (response) {
console.log(response);
alert("you have successfully deleted record");
tr.remove();
},
error: function (response) {
console.log('there is some error');
console.log(response);
}
});
})
});
</script>
終於我得到了解決方案，那個解決方案是一個小問題
function check()
{
$(document).on('click', '#delete', function (event) {
var element = event.target;
var sid = $(element).attr("sid");
console.log(sid);
deleteRecord(sid);
});
}
function deleteRecord(sid) {
// console.log("yes we are in");
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home.aspx/deleteData',
data: "{'id':'" + sid + "'}",
async: false,
success: function (response) {
alert("you have successfully deleted record");
} ,
error: function () {
console.log('there is some error');
}
});
這是HTML的一部分
for (var i = 0; i < data.length; i++) {
var sid = data[i].sid
strData += "<tr>\
<td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
<td><input type='button' id='delete' value='delete' sid='" + sid + "' onclick='check()' ></td>\
<td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
</tr>";
}
謝謝大家！謝謝
如何使用jQuery / Javascript / PHP刪除HTML表中的記錄
[英]How to delete record in HTML table using jQuery/Javascript/PHP
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.