包含添加员工,编辑,保存,替换,删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
// function del(obj){//脚本删除方式
// if(confirm("是否删除?")){
// //获得obj的父元素的父元素使用移除(td->tr->移除)
// $(obj).parent().parent().remove();
// }
// };
// $("a").click(function(){
// if(confirm("是否删除?")){
// //获得当前元素父元素的父元素使用移除(td->tr->移除)
// $(this).parent().parent().remove();
// }
// });
$(function(){
$(document).on({
"mouseover":function(){
$(this).css("color","deepskyblue");
},
"mouseout":function(){$(this).css("color","black");}
},"th");
$(document).on("click","a:contains(保存)",function(){
$(this).text("编辑").parent().parent().children().each(function(index){
if(index<3){
// var text = $(this).children().get(0).value;//取得当前文本框的子元素第一个元素DOM对象的value属性
var text = $(this).children().eq(0).val();
$(this).empty();
$(this).text(text);
}
});
});
$(document).on("click","a:contains(编辑)",function(){
// $(this).attr("href","#").text("保存").replaceWith("$(this)");
$(this).text("保存").parent().parent().children().each(function(index){
if(index<3){
var text = $(this).text();
$(this).empty();
$("<input type='text'size='3'>").val(text).appendTo($(this));
}/*else if(index==4){
$(this).empty();
$("<a>").attr("href","#").text("保存").appendTo($(this));
}*/
});
});
//绑定document(网页打开就创建)
$(document).on("click","a:contains(删除)",function(){
if(confirm("是否删除?")){
// //获得当前元素父元素的父元素使用移除(td->tr->移除)
$(this).parent().parent().remove();
}
});
// $(document).off("mouseout","th");//解除绑定鼠标移开效果
$(":Submit").click(function(){
var tr = $("<tr>");
tr.appendTo("table[value=t2]");
$("<td>").text($("input[name=name]").val()).appendTo(tr);
$("<td>").text($("input[name=email]").val()).appendTo(tr);
$("<td>").text($("input[name=salary]").val()).appendTo(tr);
//动态创建删除方式
/*var a = $("<a>").attr("href","#").text("删除").click(function(){
if(confirm("是否删除?")){
//获得当前元素父元素的父元素使用移除(td->tr->移除)
$(this).parent().parent().remove();
}
});*/
var a = $("<a>").attr("href","#").text("删除");
var b = $("<a>").attr("href","#").text("编辑");
$("<td>").append(a).appendTo(tr);
$("<td>").append(b).appendTo(tr);
// $("<td><a href='#' onclick='del(this)'>删除</a></td>").appendTo(tr);
//重置输入框
$("input[name=name]").val("");
$("input[name=email]").val("");
$("input[name=salary]").val("");
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<th>
添加新员工
</th>
</tr>
<tr>
<td>
name:<input type="text"name="name"/>
email:<input type="email"name="email"/>
salary:<input type="text"name="salary"/>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit"name="submit" value="Submit"/>
</td>
</tr>
</table>
<hr size="1"/>
<table border="1px soild red" align="center" value="t2" width="300" style="text-align: center;">
<tr value="tt">
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
</table>
</body>
</html>