我正在制作一个表格,您可以在其中添加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)
<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)
你可以尝试做这样的事情,
<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)
$(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)
| 归档时间: |
|
| 查看次数: |
63315 次 |
| 最近记录: |