Я создал систему управления местами, где вы можете создавать, удалять или редактировать названия мест.
Это таблица, в которой в каждой строке есть название места, кнопка редактирования и кнопка удаления.
В конце таблицы есть кнопка «Создать новое место». Теперь, когда я нажимаю кнопку «Создать новое место», я получаю новую сгенерированную строку, в которой я могу написать новое имя, отменить операцию и сохранить операцию.
Я хочу знать, чтобы сохранить операцию, которая должна удалить сгенерированный контент и создать новую строку с именем, редактировать и удалять ячейки. Моя проблема заключается в том, что он работает только с одной строкой, но если у меня в работе два имени, jquery не знает, в какой строке я щелкнул, чтобы сохранить его.
Пример:
сгенерированный Row1 = Испания
сгенерированный Row2 = Бразилия
нажмите кнопку ОК в строке 2, строка 2 удалена с помощью jquery, имя строки 1 сгенерировано в placetable = неправильно!
Здесь код
<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>