一、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.edit-form {
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<!--
假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
-->
<button class="add">添加一条新的访客信息</button>
<button class="del">删除选中</button>
<button class="up-sort">从小到大</button>
<button class="down-sort">从大到小</button>
<div class='edit-form'>
<label>
<span>姓名：</span>
<input type="text" name="name" class='edit-name' id='edit-name'>
</label>
<label>
<span>年龄：</span>
<input type="text" name="name" class='edit-age' id='edit-age'>
</label>
<button class='sure-edit-btn' id='sure-edit-btn'>确定</button>
</div>
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>序列号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
<th>选择</th>
</tr>
</thead>
<tbody id='container'>
</tbody>
</table>
<script type="text/javascript">
var info = [
{ name: "胡杭", age: 16 },
{ name: "胜明", age: 22 },
{ name: "军毅", age: 21 },
{ name: "晓华", age: 13 },
{ name: "盛聪", age: 23 },
{ name: "侦剑", age: 32 },
{ name: "红翔", age: 25 },
{ name: "超维", age: 18 },
{ name: "士琪", age: 22 },
{ name: "艳华", age: 20 }
];
var arr = info;
var addBtn = document.querySelector(".add");
var delBtn = document.querySelector(".del");
var upSortBtn = document.querySelector(".up-sort");
var downSortBtn = document.querySelector(".down-sort");
var deleteSigleBtn = document.getElementsByClassName("del-single");
var nameVal = document.getElementById("edit-name");
var ageVal = document.getElementById("edit-age");
var sureEditBtn = document.getElementById("sure-edit-btn");
var container = document.getElementById("container");
var index = 0;
var nowArr = [];
var delArray = [];
var editUserName = '';
//添加一条心的访客信息
addBtn.addEventListener("click", function() {
if (index < info.length) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
var user = info[index];
nowArr.push(user);
console.log(nowArr.length);
index++;
for (var i = 0; i < nowArr.length; i++) {
fillList(nowArr[i], i);
}
} else {
alert("已加载完信息！");
}
})
//删除选中
delBtn.addEventListener("click", function() {
var choose = document.getElementsByClassName('choose');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
for (var i = 0; i < delArray.length; i++) {
delArr(delArray[i]);
}
for (var i = 0; i < nowArr.length; i++) {
fillList(nowArr[i], i);
}
})
//从大到小排序
upSortBtn.addEventListener("click", function() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
sortArr(nowArr, 1)
for (var i = 0; i < nowArr.length; i++) {
/* var index = i;*/
fillList(nowArr[i], i);
}
})
// 从大到小排序
downSortBtn.addEventListener("click", function() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
sortArr(nowArr, 2)
for (var i = 0; i < nowArr.length; i++) {
/* var index = i;*/
fillList(nowArr[i], i);
}
})
//确认修改
sureEditBtn.addEventListener("click", function() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
var name1 = document.getElementById("edit-name").value;
var age1 = document.getElementById("edit-age").value;
for (var i = 0; i < nowArr.length; i++) {
if (nowArr[i].name == editUserName) {
nowArr[i].name = name1;
nowArr[i].age = age1;
editUserName = name1;
}
}
console.log(nowArr);
for (var i = 0; i < nowArr.length; i++) {
/* var index = i;*/
fillList(nowArr[i], i);
}
})
//填充列表
function fillList(user, index1) {
var user = user;
var trList = document.createElement("tr");
trList.setAttribute("class", "mes-list");
var tdNum = document.createElement("td");
tdNum.innerText = (index1 + 1);
trList.appendChild(tdNum);
var tdName = document.createElement("td");
tdName.innerText = user.name;
trList.appendChild(tdName);
var tdAge = document.createElement("td");
tdAge.innerText = user.age;
trList.appendChild(tdAge);
var tdOpt = document.createElement("td");
var del = document.createElement("button");
del.innerText = "删除";
del.setAttribute("class", "del-single");
del.setAttribute("data-name", user.name);
del.setAttribute("data-age", user.age);
tdOpt.appendChild(del);
trList.appendChild(tdOpt);
var edit = document.createElement("button");
edit.innerText = "修改";
edit.setAttribute("class", "edit-user-name");
edit.setAttribute("data-name", user.name);
edit.setAttribute("data-age", user.age);
tdOpt.appendChild(edit);
trList.appendChild(tdOpt);
var tdOpt = document.createElement("td");
var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkbox");
checkBox.setAttribute("class", "choose");
checkBox.setAttribute("data-name", user.name);
tdOpt.appendChild(checkBox);
trList.appendChild(tdOpt);
container.appendChild(trList);
}
//删除单个访客信息按钮
container.addEventListener("click", function(ev) {
var target = ev.target;
if (target.getAttribute("class") == "del-single") {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
var userName = target.getAttribute("data-name");
delArr(userName);
for (var i = 0; i < nowArr.length; i++) {
fillList(nowArr[i], i);
}
}
})
//修改按钮事件
container.addEventListener("click", function(event) {
event.stopPropagation();
var ev = event;
var target = ev.target;
console.log(target);
if (target.getAttribute("class") == "edit-user-name") {
var name = target.getAttribute("data-name");
var age = target.getAttribute("data-age");
/*console.log(name+":"+age);*/
nameVal.value = name;
ageVal.value = age;
editUserName = name;
}
})
//选择框事件
container.addEventListener("click", function(ev) {
var target = ev.target;
if (target.getAttribute("type") == "checkbox") {
var status = target.checked;
var userName = target.getAttribute("data-name");
if (status == true) {
/*delArr(userName);*/
delArray.push(userName);
} else {
for (var i = 0; i < delArray.length; i++) {
if (delArray[i].name == userName) {
delArray.splice(i, 1);
}
}
}
}
})
// 数组排序
function sortArr(arr, t) {
var a = arr;
if (t == 1) {
for (var i = 0; i < a.length; i++) {
for (var j = i + 1; j < a.length; j++) {
/* console.log(a[i].age+","+a[j].age);*/
if (parseInt(a[i].age) > parseInt(a[j].age)) {
var t = a[j];
a[j] = a[i];
a[i] = t;
}
}
}
} else {
for (var i = 0; i < a.length; i++) {
for (var j = i + 1; j < a.length; j++) {
/* console.log(a[i].age+","+a[j].age)*/
if (parseInt(a[i].age) < parseInt(a[j].age)) {
var t = a[j];
a[j] = a[i];
a[i] = t;
}
}
}
}
return a;
}
//删除数组元素
function delArr(name) {
/*console.log(name+nowArr.length);*/
for (var i = 0; i < nowArr.length; i++) {
if (nowArr[i].name == name) {
nowArr.splice(i, 1);
}
}
return nowArr;
}
</script>
</body>
</html>
二、效果图
3、总结：
原生的javascript不熟悉，dom操作不顺手，继续打js基础。