我制作了一个场所管理系统,您可以在其中创建,删除或编辑场所名称。 这是一个表格,每一行都有一个地名,一个编辑按钮和一个删除按钮。 在表的末尾有一个“创建新地方”按钮。现在当我点击“创建新地点”按钮时,我会得到一个新生成的行,我可以在其中写入新名称,取消操作并保存操作。
我想知道保存一个操作,该操作应该删除生成的内容并创建一个带有名称,编辑和删除单元格的新行。我的问题是它只适用于一行,但如果我有两个名称在操作,那么jquery不知道我点击哪一行确定保存它。
示例:
生成Row1 =西班牙
生成Row2 = Brasil
在第2行中单击确定,在jquery中删除第2行,在placetable中生成的第1行的名称=错误!
这里是代码
<head>
<script src="../jquery.js" type="text/javascript"></script>
$(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() {
$("tr:last").after("<tr><td><input style='width: 80%' /></td><td class=ok>OK</td><td class=cancel>Cancel</td></tr>").ready(function() {
$(".cancel").live("click", function() {
$(this).parent().remove();
});
$(".ok").click(function() {
var name = $(this).val();
$(this).parent().remove();
$("tr .edit:last").after("<tr><td>"+name+"</td><td class=edit>edit</td><td class=delete>delete</td></tr>");
});
});
})
});
</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>
答案 0 :(得分:2)
首先,id - 在页面中必须是唯一的!
你是如何编辑你的行的?这里没有这样的代码。你也可以添加它吗?
小提示,你可以在编辑点击时用一些类('编辑')标记选定的行(但在你应该从任何其他行中删除这个类之前)这将帮助你找出哪一行处于编辑状态。
编辑: 您还可以使用现有插件之一:
* Flexigrid: http://flexigrid.info/
* jQuery Grid: http://www.trirand.com/blog/
* jqGridView: http://plugins.jquery.com/project/jqGridView
* Ingrid: http://reconstrukt.com/ingrid/
jQuery Grid(上面的#2)支持可编辑单元格,并且在网站上有非常好的文档和示例。我建议首先看看它。
答案 1 :(得分:2)
经过测试并有效......
你的jquery逻辑很糟糕。我希望这能让你更好地理解它......; - )
<script type="text/javascript" language="javascript">
$(function() {
$(".edit").live('click',function() {
var item = $(this).attr("rel");
alert("edit "+item);
return false;
});
$(".delete").live('click',function() {
var item = $(this).attr("item");
alert("delete "+id);
return false;
});
$(".cancel").live("click", function() {
$(this).parent().remove();
return false;
});
$(".ok").live('click',function() {
var name = $(this).parent().siblings().find('input[type="text"]').val();
$(this).parent().parent().remove();
$("tr:last").after("<tr><td>"+name+"</td><td><a href='#' class='edit'>edit</a></td><td><a href='#' class='delete'>delete</a></td></tr>");
return false;
});
$("#newbutton").click(function() {
$("tr:last").after("<tr><td><input type='text' style='width: 80%' /></td><td><input type='button' class='ok' value='OK' /></td><td><input type='button' class='cancel' value='Cancel' /></td></tr>")
})
});
</script>
</head>
<body>
<table border="1" id="table">
<tr><th>Name</th></tr>
<tr>
<td>Bombai</td>
<td rel="1"><a href="#" class="edit">edit</a></td>
<td rel="1"><a href="#" class="delete">delete</a></td>
</tr>
<tr>
<td>London</td>
<td rel="2"><a href="#" class="edit">edit</a></td>
<td rel="2"><a href="#" class="delete">delete</a></td>
</tr>
<tr>
<td>Rom</td>
<td rel="3"><a href="#" class="edit">edit</a></td>
<td rel="3"><a href="#" class="delete">delete</a></td>
</tr>
</table>
<button id="newbutton">Add New Place</button>
答案 2 :(得分:1)
这里有一些问题。
第一个是id。这些必须是唯一的,特别是如果您在javascript中使用它们作为参考。由于您生成的行无论如何都不包含任何id,我只想完全删除它们。如果你真的想要它们,你可以写一些像“id ='delete_1'”这样的东西来区分它们。
其次,您在单击回调函数中使用实时回调绑定功能。这意味着每次单击“新建”按钮时,它都会尝试再次绑定您的回调。我并不是100%确定这样做会产生副作用,但“实时”的原因是它会自动将回调绑定到任何生成的html,因此您不必手动执行。
我建议在一个函数之外移动“.cancel”和“.ok”点击绑定调用。使用live绑定“.ok”单击回调。完成这些更改后,它可能有助于解决您的问题。
如果它没有帮助,请使用firebug来找出jquery在保存时引用错误行的原因。