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

我试图在HTML中创建一个表格，将其作为每行行为删除按钮上的按钮。所以当按钮被点击时，它将删除html行以及DB中的一行。什么是最简单的方法来做到这一点？在表格的每一行上添加按钮的最简单方法HTML

这是我迄今为止，但它不都不好看：

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>

来源

2014-05-02 user977154

你有任何反对使用服务器端脚本语言？ – skzryzg

你试图解决你自己的问题在哪里？ –

你的问题是什么？ –

您可以添加删除按钮，您要添加的编辑按钮，以同样的方式：

$("#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/

来源

2014-05-02 18:08:22

这是什么'class =“+”delbtn“+”>'？为什么不直接写'class = delbtn ...'' –

@KingKing只是一个剩余的人工产物来复制OP的代码 –

顺便说一句，为什么我们不得不打扰'索引'，而我们可以使用'最接近'来获得父' tr'，所以它只需要'$（this）.closest（'tr'）。remove（）;'http://jsfiddle.net/viphalongpro/qGGPZ/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 
}

来源

2014-05-02 18:08:06 StaticVoid

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

回答

相关问题