<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vS资源/jquery/js/jquery-2.0.0.min.js"></script>
<script>
$(function () {
// 删除行,删除当前a标签的父级的父级
function deleFun() {
// 获取当前a的父级的父级
var $rowTr = $(this).parent().parent();
var $name = $rowTr.find("td:first").text();
// alert($name)
// 移除时做判断,显示移除的行的name
if (confirm("你确定要删除[" + $name + "]")) {
// 用remove移除
$rowTr.remove();
}
return false;
}
// 添加内容
// 获取提交
$("input[type=submit]").click(function () {
// alert("a")
// 获取新添加的值
var $tex01 = $("#inp01").val();
var $tex02 = $("#inp02").val();
var $tex03 = $("#inp03").val();
// 创建tr和td,传递内容值
var $newObj = $(
"<tr>" +
"<td>" + $tex01 + "</td>"
+ "<td>" + $tex02 + "</td>"
+ "<td>" + $tex03 + "</td>"
+ "<td><a href=\"deleteEmp?id=002\">删除</a></td>"
+ "</tr>"
);
// 将行和列赋给表格
$newObj.appendTo($("#sel1"));
// 删除新创的行
$newObj.find("a").click(deleFun);
});
$("a").click(deleFun)
})
</script>
</head>
<body>
<table id="sel1" align="center" border="1">
<tr>
<th>name:</th>
<th>email:</th>
<th>salary:</th>
<th></th>
</tr>
<tr>
<td>tom</td>
<td>1528466@qq.com</td>
<td>5200</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>bob</td>
<td>1528466@qq.com</td>
<td>5200</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>swallow</td>
<td>1528466@qq.com</td>
<td>5200</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<table id="sel2">
<div>
<h3>欢迎新人</h3>
<span></span>
</div>
<ul>
<li><span>用户名称</span><input type="text" placeholder="请输入内容" id="inp01"></li>
<li><span>用户邮箱</span><input type="text" placeholder="请输入内容" id="inp02"></li>
<li><span>用户薪资</span><input type="text" placeholder="请输入内容" id="inp03"></li>
<li><input type="submit" value="提交"></li>
</ul>
</table>
</body>
</html>
动态给表格添加删除行
最新推荐文章于 2023-11-30 09:18:07 发布