jQuery - 通过单击 <td> 删除表格行 <tr>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/926319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - remove table row <tr> by clicking a <td>
提问by elhombre
I am making a table in which you can add aditional rows. When you add a row you can either save it or cancel it, by clicking cancel the row will be removed. It works with one row but when I create like six of them and click cancel the selected row wont be removed but the last row will. Here my Code so far. Does anyone know what I'm doing wrong?
我正在制作一个表格，您可以在其中添加其他行。添加行时，您可以保存或取消它，单击取消将删除该行。它适用于一行，但是当我创建其中的六个并单击取消时，所选行不会被删除，但最后一行会被删除。到目前为止，这是我的代码。有谁知道我做错了什么？
<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>
回答by duckyflip
回答by Uahmed
<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>
in javascript
在 JavaScript 中
function delete_user(row)
{
row.closest('tr').remove();
}
回答by Jay Patel
you can try do something like this,
你可以尝试做这样的事情，
Check this Demo js Fiddle
检查这个 Demo js Fiddle
HTML
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>
jQuery :
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
});
});
回答by J LAKSHMANAN
script
脚本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>
$(document).ready(function () {
var markup = "<tr><td><input type='checkbox' name='record'></td><td></td><td></td></tr>";
$("#Add").click(function () {
$("#tbl1").append(markup);
});
$("#remove").click(function () {
$("table tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
});
}); </script>
回答by Muhammad Waqas
Try the following code:
试试下面的代码：
$(this).closest("tr").remove();
回答by chaos
You're not scoping your removal operation to the context of the row you're adding. Try:
您没有将删除操作的范围限定在您添加的行的上下文中。尝试：
$(this).find("tr td .cancel").click(...)
Will need to do the same deal with the edit button.
需要对编辑按钮做同样的处理。
回答by J LAKSHMANAN
body
身体
Add Row
添加行
<table border="5px" cellspacing="3px" cellpadding="10px" id="tbl1">
<thead>
<tr>
<td>
Select
</td>
<td>
column 2
</td>
<td>
column 3
</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br />
<button id="remove">Delete Row</button>
