表格數(shù)據(jù).png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#bgDiv {
position: absolute;
left: 0;
top: 0;
background-color: black;
opacity: 0.2; /*設(shè)置不透明度*/
display: none;
}
#fgDiv {
position: absolute;
width: 250px;
height: 100px;
border: 1px solid #808080;
background-color: #808080;
display: none;
border-radius: 5px 5px; /*設(shè)置圓角*/
}
td {
text-align: center;
}
#fgDiv input {
align-items: center;
}
</style>
<script src="script/jquery-3.2.1.js"></script>
<script>
$(function () {
var list = [
{ id: "1", country: "中國(guó)", capital: "北京" },
{ id: "2", country: "美國(guó)", capital: "紐約" },
{ id: "3", country: "日本", capital: "東京" },
{ id: "4", country: "韓國(guó)", capital: "首爾" },
];
//生成表格數(shù)據(jù)
$.each(list, function (index, item) {
$('<tr id="' + item.id + '"><td><input type="checkbox" /></td><td>' + item.id + '</td><td>' + item.country + '</td><td>' + item.capital + '</td><td><input type="button" value="修改"/></td></tr>').appendTo($("#list"));
});
//為復(fù)選框checkAll設(shè)置點(diǎn)擊事件，完成全選脓杉、全消的功能
$("#checkAll").click(function () {
//根據(jù)當(dāng)前復(fù)選框的狀態(tài)設(shè)置其它行復(fù)選框的狀態(tài)
$("#list :checkbox").attr("checked", this.checked);
});
//反選
$("#btnReverse").click(function () {
//數(shù)據(jù)行的復(fù)選框
$("#list :checkbox").each(function () {
this.checked = !this.checked;
});
});
//刪除選中行
$("#btnDelete").click(function () {
//$("#list :checked").parent().parent().remove();
$("#list :checked").parents("tr").remove();
});
//添加
$("#btnAdd").click(function () {
//顯示添加界面
$("#bgDiv").css("display", "block").css("width", window.innerWidth + "px").height(window.innerHeight + "px");
$("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");
//打開的清除文本框中的數(shù)據(jù)
//$("#fgDiv input[type=text]").val('');
$("#fgDiv :text,:hidden").val('');
});
//保存
$("#btnSave").click(function () {
var id = $("#hidId").val();
if (id == '') {//添加
$('<tr id="' + $("#textId").val() + '"><td><input type="checkbox"/></td><td>' + $("#textId").val() + '</td><td>' + $("#textCountry").val() + '</td><td>' + $("#textCapital").val() + '</td><td><input type="button" value="修改"/></td></tr>').appendTo($("#list")).find(":button").click(function () {
//顯示添加界面
$("#bgDiv").css("display", "block").css("width", window.innerWidth + "px").height(window.innerHeight + "px");
$("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");
//找到當(dāng)前按鈕所在td之前的所有td
var tds = $(this).parent().prevAll();
//設(shè)置文本框的值
$("#hidId").val(tds.eq(2).text());//隱藏域存放修改之前的行的ID編號(hào)值
$("#textId").val(tds.eq(2).text());
$("#textCountry").val(tds.eq(1).text());
$("#textCapital").val(tds.eq(0).text());
});
//為最新添加的一行數(shù)據(jù)的修改按鈕綁定事件
//$("#list :button:last").click(function () {
// //顯示添加界面
// $("#bgDiv").css("display", "block").css("width", window.innerWidth + "px").height(window.innerHeight + "px");
// $("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");
// //找到當(dāng)前按鈕所在td之前的所有td
// var tds = $(this).parent().prevAll();
// //設(shè)置文本框的值
// $("#hidId").val(tds.eq(2).text());//隱藏域存放修改之前的行的ID編號(hào)值
// $("#textId").val(tds.eq(2).text());
// $("#textCountry").val(tds.eq(1).text());
// $("#textCapital").val(tds.eq(0).text());
//});
} else {//修改
var trds = $("#" + id + ">td");
trds.eq(1).text($("#textId").val());
trds.eq(2).text($("#textCountry").val());
trds.eq(3).text($("#textCapital").val());
//修改tr的id屬性，保持?jǐn)?shù)據(jù)一致
$("#" + id).attr("id", $("#textId").val());
}
//隱藏界面
$("#bgDiv").css("display", "none");
$("#fgDiv").css("display", "none");
});
//修改
$("#list :button").click(function () {
//顯示添加界面
$("#bgDiv").css("display", "block").css("width", window.innerWidth + "px").height(window.innerHeight + "px");
$("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");
//找到當(dāng)前按鈕所在td之前的所有td
var tds = $(this).parent().prevAll();
//設(shè)置文本框的值
$("#hidId").val(tds.eq(2).text());//隱藏域存放修改之前的行的ID編號(hào)值
$("#textId").val(tds.eq(2).text());
$("#textCountry").val(tds.eq(1).text());
$("#textCapital").val(tds.eq(0).text());
})
});
</script>
</head>
<body>
<input type="button" value="添加" id="btnAdd" />
<input type="button" id="btnReverse" value="反選" />
<input type="button" id="btnDelete" value="刪除" />
<table border="1">
<thead>
<th width="100"><input type="checkbox" id="checkAll" /></th>
<th width="200">編號(hào)</th>
<th width="200">國(guó)家</th>
<th width="200">首都</th>
<th width="100">修改</th>
</thead>
<tbody id="list"></tbody>
</table>
<div id="bgDiv"></div>
<div id="fgDiv">
<input type="hidden" id="hidId" />
編號(hào)：<input type="text" id="textId" />
<br>
國(guó)家：<input type="text" id="textCountry" />
<br>
首都：<input type="text" id="textCapital" />
<br>
<input type="button" id="btnSave" value="保存" />
</div>
</body>
</html>
