我正在制作一个表格，您可以在其中添加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>
由于您是动态向DOM添加行，我建议您使用live函数：
$("tr td .cancel").live("click", function(){
$(this).parent("tr:first").remove()
})
<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>
在javascript中
function delete_user(row)
{
row.closest('tr').remove();
}
你可以尝试做这样的事情，
<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>
$(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
});
});
您没有将删除操作确定为要添加的行的上下文。尝试：
$(this).find("tr td .cancel").click(...)
将需要使用编辑按钮执行相同的处理。
脚本
<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>
请尝试以下代码：
$(this).closest("tr").remove();
身体
添加行
<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>