jQuery对表格的操作示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>11111111111</title>
<style>
.hide {
display: none;
}
/*遮罩层*/
.cover {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.8;
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
margin-top: -100px;
margin-left: -200px;
background-color: white;
z-index: 1000;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-habit">爱好</label>
<input type="text" id="modal-habit">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script>
function showModal() { //定义函数实现显示模态框
$("#myCover,#myModal").removeClass("hide");
}
function closeModal() { //定义函数实现隐藏模态框
$("#myCover,#myModal").addClass("hide");
}
// --------------------------------------------------------------------------点击编辑按钮------------------------------------------------------------------------
$("tbody").on("click", ".edit-btn", function() { //事件委托解决新增加的数据没绑定事件
showModal();
// 原有的值填到模态框里面
var $currentEle = $(this).parent().parent();
var name = $currentEle.children().eq(1).text(); //或者 var name = $(this).parent('td').prev().prev().text();
var habit = $currentEle.children().eq(2).text(); //或者 var habit = $(this).parent('td').prev().text();
$("#modal-name").val(name);
$("#modal-habit").val(habit);
$("#myModal").data("currenttr", $currentEle); //值保存起来用来判断后面的条件是新增加的还是编辑的模态框
});
// -----------------------------------------------------------------------点击新增按钮-------------------------------------------------------------------------
// 1. 弹出模态框
$("#add").on("click", function() {
showModal();
});
//-------------------------------------------------------------------------- 删除按钮---------------------------------------------------------------------------
// 1. 删除当前行
$("tbody").on("click", ".delete-btn", function() {
// this指向的是实际触发事件的元素
$(this).parent().parent().nextAll().each(function() { //当前行后面的所有的tr,依次更新
var oldNumber = $(this).children().first().text();
$(this).children().first().text(oldNumber - 1); //删除行的后面的序号都减去一
});
$(this).parent().parent().remove();
});
//------------------------------------------------------------------------ 模态框中有取消按钮-------------------------------------------------------------------
// 1. 清空模态框中input的值
// 2. 关闭模态框
$("#modal-cancel").on("click", function() {
$("#myModal").find("input").val("");
// $("#myModal input").val("");
closeModal(); //隐藏模态框
});
// -----------------------------------------------------------------------------模态框中的提交按钮-----------------------------------------------------------
// 取到用户的输入
$("#modal-submit").on("click", function() {
var name = $("#modal-name").val();
var habit = $("#modal-habit").val();
// 1. 判断是新增操作还是编辑操作
var $currenttrEle = $("#myModal").data("currenttr");
if ($currenttrEle !== undefined) { //有值，说明是编辑状态
$currenttrEle.children().eq(1).text(name);
$currenttrEle.children().eq(2).text(habit);
$("#myModal").removeData();
} else {
// 如果是新增操作
// 1. 创建一个新的tr标签，把用户的数据填进去，再添加到tbody最后
var trEle = document.createElement("tr");
var number = $("tr").length;
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + habit + "</td>" +
'<td><button>编辑</button><button>删除</button></td>');
$("tbody").append(trEle);
$("#myModal").find("input").val(""); //查找效率高
}
closeModal(); //关闭模态框
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-03-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读