jQuery - 单击<td>删除表行<tr>

elh*_*bre 15 jquery

我正在制作一个表格,您可以在其中添加aditional行.添加行时,您可以保存或取消它,单击取消将删除该行.它适用于一行,但当我创建其中六个并单击取消时,所选行将不会被删除,但最后一行将.到目前为止我的代码.有谁知道我做错了什么?

<head>
  <script src="../jquery.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(document).ready(function() {
  $(".edit").click(function() {
    var id = $(this).attr("id");
    alert("edit "+id);
  });
  $(".delete").click(function() {
    var id = $(this).attr("id");
    alert("delete "+id);
  });
  $("#newbutton").click(function() {
  var randomnumber=Math.floor(Math.random()*100);
    $("tr:last").after("<tr id="+randomnumber+"><td><form><input style='width: 80%'></form></td><td class=ok>OK</td><td id="+randomnumber+" class=cancel>Cancel</td></tr>").ready(function() {
      $("tr td .cancel").click(function() {
        $(this).remove();
      });
      $(".ok").click(function() {
        alert("OK!");
      });
    });
  })
}); 
  </script>
</head>
<table border=1 id=table>
<tr><th>Name</th></tr>
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr> 
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr> 
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr> 
</table><label id=newbutton>New Place</label>
Run Code Online (Sandbox Code Playgroud)

duc*_*lip 17

由于您是动态向DOM添加行,我建议您使用live函数:

$("tr td .cancel").live("click", function(){
  $(this).parent("tr:first").remove()
})
Run Code Online (Sandbox Code Playgroud)

  • live()方法在jQuery 1.7版中已弃用,在1.9版中已删除.请改用on()方法.来自:http://www.w3schools.com/jquery/event_live.asp (3认同)

Uah*_*med 9

<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>
Run Code Online (Sandbox Code Playgroud)

在javascript中

    function delete_user(row)
    {
        row.closest('tr').remove();


    }
Run Code Online (Sandbox Code Playgroud)


Jay*_*tel 5

你可以尝试做这样的事情,

检查一下 Demo js Fiddle

的HTML

<table border=2>
    <tr>
        <td>jQuery</td>
        <td>mootools</td>
    </tr>
    <tr>
        <td>Dojo</td>
        <td>FUEL</td>
    </tr>
    <tr>
        <td>Raphael</td>
        <td>Rico</td>
    </tr>
    <tr>
        <td>SproutCore</td>
        <td>Lively Kernel</td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$(function() {
   $('tr')
       .find('td')
       .append('<input type="button" value="Delete" class="del"/>')
       .parent()//traversing to 'tr' Element
       .append('<td><input type="button" value="Delete row" class="delrow" /></td>');

    $('.del').click(function() {
       $(this).parent().remove(); //Deleting TD element
    });

    $('.delrow').click(function(){
       $(this).parent().parent().remove(); //Deleting the Row (tr) Element
    });
});
Run Code Online (Sandbox Code Playgroud)