<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用jQuery实现表格栏内增删改操作</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.modal {
position: absolute;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
z-index: 100;
margin-top: -150px;
margin-left: -200px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monicx</td>
<td>reading</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<!--模态框-->
<div class="cover hide"></div>
<div class="modal hide">
<label for="username">用户名:</label>
<p><input type="text" id="username"></p>
<label for="hobby">爱 好</label>
<p><input type="text" id="hobby"></p>
<p>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
//隐藏模态框
function hideModal() {
$(".modal,.cover").addClass('hide');
}
//模态框去掉隐藏
function showModal() {
$(".modal,.cover").removeClass('hide');
}
//点击新增按钮
$('#add').on('click', function () {
showModal();
});
//点击取消按钮
$('#cancel').click(function () {
hideModal();
//清空输入框中的内容
$('#username,#hobby').val('')
});
//点击编缉按钮
$('table').on('click', '.edit', function () {
//获取点击编缉按钮所在的行的子元素
let $curTdsEle = $(this).parent().parent().children();
//将所得到的子元素对象放到临时数据中
$('.modal').data('tr', $curTdsEle);
showModal();
//将编织按键所在行的内容显示在模态框的输入框中
let name=$curTdsEle[1].innerText;
let hobby=$curTdsEle[2].innerText;
// let name=$($curTdsEle[1]).text();
// let hobby=$($curTdsEle[2]).text();
$('#username').val(name);
$('#hobby').val(hobby);
});
//点击提交按钮
$('#submit').on('click', function () {
//获取模态框中的输入内容
let name = $('#username').val();
let hobby = $('#hobby').val();
if ($('.modal').data('tr') === undefined) {
let trEle = document.createElement('tr');
let td1Ele = document.createElement('td');
td1Ele.innerText = $('tbody tr').length + 1;
trEle.append(td1Ele);
let td2Ele = document.createElement('td');
td2Ele.innerText = name;
trEle.append(td2Ele);
let td3Ele = document.createElement('td');
td3Ele.innerText = hobby;
trEle.append(td3Ele);
let td4Ele = document.createElement('td');
td4Ele.innerHTML = ` <input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">`;
trEle.append(td4Ele);
$('tbody').append(trEle);
hideModal();
}else {
let $tdsEle=$('.modal').data('tr');
$($tdsEle[1]).text(name);
$($tdsEle[2]).text(hobby);
$('.modal').removeData('tr');
hideModal();
$('#username,#hobby').val('')
}
});
//点击删除按钮
$('table').on('click', '.delete', function () {
//找到这个删除按钮所在的tr元素
let $curentTr = $(this).parent().parent();
//找到这个tr元素下的所有tr元素
let $nexAllTr = $curentTr.nextAll();
//将这个tr下的所有tr的序号都减1
$nexAllTr.each(function () {
let n = $(this).children().first().text();
alert(n);
$(this).children().first().text(n - 1);
});
//删除这个该tr元素。
$curentTr.remove();
})
</script>
</body>
</html>
jQuery实现表格栏内的增删改操作。
最新推荐文章于 2022-09-01 17:26:53 发布