| 代码如下 |
复制代码 |
$().ready(function(){ varindex = 1; /** * 完成添加功能 */ $("#addUser").click(function(){ /** * 1、获取姓名,电话,email的值 * 2、创建 * |
*
| *
${姓名} | *
${email} | *
${phone} | *
修改 | *
删除 | *
* 3、把创建完成的tr追加到tbody上
*/
varname = $("#name").val();
varemail = $("#email").val();
vartel = $("#tel").val();
var$checkbox = $("").attr("type","checkbox");
var$checkboxTD = $("
| ").append($checkbox); $checkboxTD.attr("id",index);
index++;
var$nameTD = $("
| ").text(name); var$emailTD = $("
| ").text(email); var$phoneTD = $("
| ").text(tel); var$updateA = $("").text("修改");
/**
* 完成修改的功能
*/
$updateA.css("cursor","pointer");
/**
* 给修改的超级链接添加click事件
*/
$updateA.click(function(){
varname = $(this).parent().siblings("td:eq(1)").text();
varemail = $(this).parent().siblings("td:eq(2)").text();
vartel = $(this).parent().siblings("td:eq(3)").text();
varid = $(this).parent().siblings("td:eq(0)").attr("id");
$("#name_update").val(name);
$("#email_update").val(email);
$("#tel_update").val(tel);
$("#id_update").val(id);
});
var$updateTD = $("
| ").append($updateA); var$delA = $("").text("删除");
$delA.css("cursor","pointer");
$delA.click(function(){//完成删除本行的功能
if(window.confirm("您确认要删除吗?")){
$(this).parent().parent().remove();
}
});
var$delTD = $("
| ").append($delA); var$tr = $("
|
").append($checkboxTD). append($nameTD).append($emailTD).
append($phoneTD)
.append($delTD).append($updateTD);
$("#usertable tbody").append($tr);
});
/**
* 完成删除几行的功能
*/
$("#deleteUser").click(function(){
if(window.confirm("您确认要删除吗?")){
/**
* :checkbox 所有的checkbox
* :not(#allCheckbox) 不包含id为allCheckbox
* 被选中的
*/
$(":checkbox:not(#allCheckbox):checked").parent().parent().remove();
}
});
/**
* 全选功能
*/
$("#allCheckbox").click(function(){
if($(this).attr("checked")){
$(":checkbox:not(#allCheckbox)").attr("checked",true);
}else{
$(":checkbox:not(#allCheckbox)").attr("checked",false);
}
});
/**
* 完成修改操作
*/
$("#updateUser").click(function(){
/**
* 获取到修改的id的值，根据值去匹配table中的行
*/
varidValue = $("#id_update").val();
varname_update = $("#name_update").val();
varemail_update = $("#email_update").val();
vartel_update = $("#tel_update").val();
/**
* 根据修改的id的值就定位某一行(td)
*/
$("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update);
$("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);
$("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update);
});
});
