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?
我正在制作一个表格,您可以在其中添加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>
4 个解决方案
#1
17
Since you are dynamically adding rows to the DOM I'd suggest you use the live function:
由于您是动态向DOM添加行,我建议您使用live函数:
$("tr td .cancel").live("click", function(){
$(this).parent("tr:first").remove()
})
#2
7
<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>
in javascript
function delete_user(row)
{
row.closest('tr').remove();
}
#3
4
you can try do something like this,
你可以尝试做这样的事情,
Check this 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>
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
});
});
#4
0
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.
将需要使用编辑按钮执行相同的处理。
#1
17
Since you are dynamically adding rows to the DOM I'd suggest you use the live function:
由于您是动态向DOM添加行,我建议您使用live函数:
$("tr td .cancel").live("click", function(){
$(this).parent("tr:first").remove()
})
#2
7
<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>
in javascript
function delete_user(row)
{
row.closest('tr').remove();
}
#3
4
you can try do something like this,
你可以尝试做这样的事情,
Check this 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>
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
});
});
#4
0
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.
将需要使用编辑按钮执行相同的处理。