您的位置：首页 > Web前端 > JQuery

jQuery实现数据的增删改

2016-04-14 00:00 309 查看
摘要: jQuery

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
.tb {
width: 500px;
border: 1px solid gray;
border-collapse: collapse;
font-size: 11pt;
font-family: "bodoni mt black";
}

.tb td {
border: 1px solid gray;
padding: 5px;
}

.tb thead td {
background: blue;
color: white;
text-align: center;
}

.tb tr:hover {
background: lightcyan;
}

#menu button {
width: 120px;
height: 30px;
border: 1px;
background: blue;
color: white;
border-radius: 8px;
}

#menu {
margin-bottom: 10px;
}

#menu button:hover {
background: lightskyblue;
}

#addDialog {
width: 300px;
position: absolute;
display: none;
border: 1px solid grey;
background: white;
}

#modDialog {
width: 300px;
position: absolute;
display: none;
border: 1px solid grey;
background: white;
}
</style>
</head>

<body>
<div id="menu">
<button>增加学生<tton>
<button id="delAll">删除选中的学生<tton>
</div>
<table class="tb" id="tData">
<thead>
<tr>
<td>
<input type="checkbox" id="chk" />
</td>
<td>
编号
</td>
<td>
姓名
</td>
<td>
性别
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="id" />
</td>
<td>
S001
</td>
<td>
张三
</td>
<td>
男
</td>
<td class="d">
<a class="del">删除</a>
<a class="upd">修改</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="id" />
</td>
<td>
S002
</td>
<td>
李四
</td>
<td>
男
</td>
<td class="d">
<a class="del">删除</a>
<a class="upd">修改</a>
</td>
</tr>
</tbody>
</table>

<div id="addDialog">
<div style="border-bottom: 1px solid gainsboro;text-align: right;">
<span>×</span>
</div>
<table>
<tr>
<td>
编号：
</td>
<td>
<input type="text" name="addId" id="addId" />
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input type="text" name="addNme" id="addName" />
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" checked="checked" id="sex1" value="男" />男
<input type="radio" name="sex" id="sex2" value="女" />女
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="save">保存<tton>
<button class="qx">取消<tton>
</td>
</tr>
</table>
</div>
<div id="modDialog">
<div style="border-bottom: 1px solid gainsboro;text-align: right;">
<span id="ex">×</span>
</div>
<table>
<tr>
<td>
编号：
</td>
<td>
<input type="text" name="addId1" id="addId1" />
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input type="text" name="addName1" id="addName1" />
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex1" checked="checked" id="sex11" value="男" />男
<input type="radio" name="sex1" id="sex21" value="女" />女
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="updsave">保存<tton>
<button class="qx">取消<tton>
</td>
</tr>
</table>
</div>
</body>

<script type="text/javascript">
$(function() {
$("#chk").click(function() {
//获取当前对象是否选中,this是一个原生的dom对象，转成jquery
var boo = $(this).prop("checked");
$("input[name='id']").prop("checked", boo);
});
$(document).on("click", "#tData input[name='id']", function() {
var boo = $(this).prop("checked"); //false
if (!boo) {
$("#chk").prop("checked", false);
} else { //boo=true
var cheds = $("#tData tbody :checked");
var ins = $("#tData tbody input[name='id']");
//alert(ins.length + "," + cheds.length);
if (ins.length == cheds.length) {
$("#chk").prop("checked", true);
}
}
})
$("#menu button:first-child").click(function() {
var w = window.screen.width;
var h = window.screen.height;
w = w / 2 - 150;
h = h / 2 - 200;
$("#addDialog").css({
"display": "block",
"left": w + 'px',
"top": h + 'px'
});
});
$("#ex").click(function() {
$("#modDialog ").css("display", "none");
});
$("#addDialog div span").click(function() {
$("#addDialog ").css("display", "none");
});
$(document).on("click", ".del", function() {
var boo = window.confirm("确定要删除?");
if (boo) {
var index = this.parentNode.parentNode.rowIndex;
var table = document.getElementById("tData"); //
table.deleteRow(index);
}
});
$("#delAll").click(function() {
var boo = window.confirm("确定要删除?");
if (boo) {
if ($("#chk").prop("checked")) {
$("input:checked:gt(0)").parent().parent().remove();
} else {
$("input:checked").parent().parent().remove();
}
}
});
$(document).on("click", ".upd", function() {
var w = window.screen.width;
var h = window.screen.height;
w = w / 2 - 150;
h = h / 2 - 200;
$("#modDialog").css({
"display": "block",
"left": w + "px",
"top": h + "px"
});
t = this;
$("#addId1").val(this.parentNode.parentNode.cells[1].innerText);
$("#addName1").val(this.parentNode.parentNode.cells[2].innerText);
var sex = this.parentNode.parentNode.cells[3].innerText;
if (sex == "女") {
$("#sex21").prop("checked", "checked");
} else {
$("#sex11").prop("checked", "checked");
}
});
$(document).on("click", "#updsave", function() {
var index = t.parentNode.parentNode.rowIndex;
var id = $("#addId1").val();
var name = $("#addName1").val();
var table = document.getElementById("tData");
var sex = "男";
if ($("#sex21").prop("checked")) {
sex = "女";
}
table.rows[index].cells[1].innerText = id;
table.rows[index].cells[2].innerText = name;
table.rows[index].cells[3].innerText = sex;
_close1();
});
$("#save").click(function() {
var id = $("#addId").val();
var name = $("#addName").val();
var sex = "男";
if ($("#sex2").prop("checked")) {
sex = "女";
}
_close();
$("#tData tbody").append('<tr><td><input type="checkbox" name="id" /></td><td>' + id + '</td><td>' + name + '</td><td>' + sex + '</td><td ><a class="del">删除</a> <a class="upd">修改</a></td></tr>');
});
});
$(".qx").click(function() {
_close();
_close1();
});

function _close() {
$("#addDialog").css("display", "none");
}

function _close1() {
$("#modDialog").css("display", "none");
}
</script>

</h tml>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery 增删改
相关文章推荐
新的分享
章节导航