Question

我正在尝试在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>

Answer 1

为您的按钮添加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
}

Answer 2

您可以像添加编辑按钮一样添加删除按钮：

$("#song-table").append("<tr><td>" + obj[i].SongURL + "<button class=" +"delbtn" +">delete</button>"+ "</td></tr>");

$('button.delbtn').click(function(){
    $(this).parent().remove();
});

http://jsfiddle.net/qGGPZ/2/

在表HTML的每一行上添加按钮的最简单方法

2 个答案: