我写了html文件，在哪里创建了一个表。因此，对于每一行，我都要定义添加，编辑和删除链接。
html文件的代码如下：
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="custom-name">John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td><a href="">Edit</a></td>
<td><span class="delete"><a href="">Delete</a></span></td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">
Create new user
</button>
添加操作的模式如下：
<div id="dialog-form" title="Create new user">
<p class="validateTips">
All form fields are required.
</p>
<form>
<fieldset>
<label for="first_name">First Name</label>
<select id="first-name">
<option value="1">Arun</option>
<option value="2">Ganesh</option>
<option value="3">Suresh</option>
<option value="4">Sanganabasu</option>
</select>
<label for="last_name">Last Name</label>
<select id="last-name">
<option value="1">Hulagabal</option>
<option value="2">Cheemalamudi</option>
<option value="3">Ganiger</option>
<option value="4">Kattriguppe</option>
</select>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
Javascript代码如下：
$(function() {
var fname = $("#first-name"), lname = $("#last-name"), email = $("#email"), password = $("#password");
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Create an account" : function() {
$("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text()+' ').concat(lname.find("option:selected").text())+ "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$('span.delete').live('click', function() {
$(this).closest('tr').find('td').fadeOut(1000,
function(){
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$("#create-user").button().click(function() {
$("#dialog-form").dialog("open");
});
});
添加和删除操作现在正在运行，我创建了http://jsfiddle.net/sangu0009/FvAuZ/，但我需要编写编辑操作。请帮我解决一下如何做到这一点。这项工作更受赞赏。
答案 0 :(得分：5)
首先，我修复了错误，让你的小提琴第二次不显示对话框，接下来，我创建了第一封电子邮件和密码的编辑，因为我不知道名字：
$(function () {
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
var fname = dlg.find(("#first-name")),
lname = dlg.find(("#last-name")),
email = dlg.find(("#email")),
password = dlg.find(("#password"));
type = type || 'Create';
var config = {
autoOpen: true,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": save_data,
"Cancel": function () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
if (type === 'Edit') {
config.title = "Edit User";
get_data();
delete(config.buttons['Create an account']);
config.buttons['Edit account'] = function () {
row.remove();
save_data();
};
}
dlg.dialog(config);
function get_data() {
var _email = $(row.children().get(1)).text(),
_password = $(row.children().get(2)).text();
email.val(_email);
password.val(_password);
}
function save_data() {
$("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
};
$(document).on('click', 'span.delete', function () {
$(this).closest('tr').find('td').fadeOut(1000,
function () {
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$(document).on('click', 'td a.edit', function () {
new_dialog('Edit', $(this).parents('tr'));
return false;
});
$("#create-user").button().click(new_dialog);
});
您应该在get_data()函数中设置数据;
答案 1 :(得分：2)
这是你可以开始的事情，
将编辑链接更改为包含课程编辑的范围。
$('span.edit').on('click', function() {
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Edit an account" : function() {
name = $(this).closest('tr').find('td.custom-name').text().split(' ', 2);
email = $(this).closest('tr').find('td:nth-child(2)').text();
pass = $(this).closest('tr').find('td:nth-child(3)').text();
var fname = name[0], lname = name[1];
$("#first-name option:contains('" + name[0] + "')").attr('selected', 'selected');
$("#last-name option:contains('" + name[1] + "')").attr('selected', 'selected');
$("#email").text(email);
$("#password").text(pass);
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
return false;
});