我正在尝试在HTML中创建一个表,作为每行上的按钮,用作删除按钮。因此,当单击该按钮时,它将删除html行以及DB中的一行。最简单的方法是什么?
这是我迄今为止所拥有的,但它看起来并不好看:
function GetSongs(id) {
$.ajax(
{
type: "Get",
url: "@Url.Action("GetSongs", "Game")",
data: { playlistId: id },
success: function (data) {
json = data;
var obj = JSON.parse(json);
for (var i in obj) {
songCount++;
playlist.push(obj[i].SongURL);
$("#song-table").append("<tr><td>" + obj[i].SongURL + "<button class=" +"editbtn" +">edit</button>"+ "</td></tr>");
}
$('#song-count').empty();
$('#song-count').append('Song Count: ' + songCount);
}
});
}
这是我的表:
<div id="player-playlist" style="height: 300px; overflow:scroll; overflow-x: hidden">
<table class="zebra" id="song-table" style="width:400px;">
<tr>
<th>Song</th>
</tr>
</table>
</div>
答案 0 :(得分:2)
为您的按钮添加onclick
Javascript功能,其中包含id
作为参数:
"<button type='button' onclick='deleteThisItem(" + id + ")' >delete</button>"
Javascript功能:
function deleteThisItem(theID){
// ajax call to delete theID from database
// refresh the table
}
答案 1 :(得分:2)
您可以像添加编辑按钮一样添加删除按钮:
$("#song-table").append("<tr><td>" + obj[i].SongURL + "<button class=" +"delbtn" +">delete</button>"+ "</td></tr>");
$('button.delbtn').click(function(){
$(this).parent().remove();
});