JavaScript中DOM操作训练——数据的增删改查

最新推荐文章于 2022-11-15 23:21:14 发布

失忆症患者_

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量699

点赞数

分类专栏： JavaScript基础文章标签： js html web html5

本文链接：https://blog.csdn.net/qq_41929578/article/details/109147212

版权

JavaScript基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

题目概述：已知有一套JSON格式的人员数据表
基于该表，实现网页方式的列表显示、计算年龄、重新加载等功能

================================================

环境支持：IE 7+ Firefox

================================================

技术范畴：JavaScript JSON DOM CSS

================================================

详细说明：

1、本套考题共包括4个文件：

    data.js       JSON数据文件，不允许修改
    fun.js        自定义函数文件，要求考生将所有的实现逻辑都写在该文件中
    index.htm     网页执行文件，遵循W3C XHTML 1.0 Transitional规范，不允许修改
    style.css     样式表文件，可以增加样式，但不允许删除原有样式

2、实现逻辑

   在文件fun.js中，已经为考生定义了3个函数名称：

   initData()     显示数据/重新显示全部数据
   getAge()       计算年龄
   showGirl()     只显示女性

   请考生完成以上3个函数功能，但不允许修改函数名称
   其中，initData函数如果只能实现一次加载，则最多得到30分；如果在增加字段后，能实现多次加载，则最多能得到50分
   注意其中的addField函数，为内置函数，不允许考生修改！

3、页面样式

   如果在完成功能的基础上，可以通过CSS对页面样式进行优化，会酌情加分

================================================

注意事项：

本套考题旨在验证考生对于原生JavaScript以及DOM的掌握程度，因此不建议使用JQuery等客户端框架；

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>训练脚本编写能力</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="data.js"></script>
	<script type="text/javascript" src="fun.js"></script>
</head>
<body>

	<div id="toolBar">
		<ul>
			<li onclick="javascript:initData()">1、显示数据 <span class="des">(30分)</span></li>
			<li onclick="javascript:getAge()">2、计算年龄 <span class="des">(30分)</span></li>
			<li onclick="javascript:addField()">3、增加：性别字段 </li>
			<li onclick="javascript:initData1()">4、重新显示全部数据 <span class="des">(20分)</span></li>
			<li onclick="javascript:showGirl()">5、只显示女性 <span class="des">(20分)</span></li>
		</ul>
	</div>

	<div id="container">
		<table>
			<thead>
				<tr></tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>

     
</body>
</html>

fun.js

/*
=================================================================================
运和软件研发人员笔试题：客户端脚本编写能力
考题版本：2014/07/07

考生姓名：
=================================================================================
*/

/*
函数：显示数据/重新显示全部数据
*/

function initData() {
	var con = document.querySelector('#container');
	var thead = con.querySelector('thead');
	var tr = con.querySelector('tr');
	for (var k in data.title) {
		var th = document.createElement('th');
		
		th.innerHTML = data.title[k];
		tr.appendChild(th);
	}

	var tbody = document.querySelector('tbody');
	for (var i = 0; i < data.datas.length; i++) {
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		for (var k in data.datas[i]) {
			var td = document.createElement('td');
			td.innerHTML = data.datas[i][k];
			tr.appendChild(td);
		}
	}
	
	

}


function initData1(){
	//由考生完成
	
	
	var container = document.querySelector("#container");
	var trh = container.querySelector("tr");
	var tbody = container.querySelector("tbody");
	
	for(var j=2;j>=0;j--){
		trh.removeChild(trh.children[j]);
	}
	
	for(var i=tbody.children.length-1;i>=0;i--){
		tbody.removeChild(tbody.children[i])
	}
	
	for(var key in data.title){
		var th = document.createElement('th')
		th.innerHTML = data.title[key];
		trh.appendChild(th);
	}
	
	for (var i = 0; i < data.datas.length; i++) { 
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (var k in data.datas[i]) {
                var td = document.createElement('td');
                td.innerHTML = data.datas[i][k];
                tr.appendChild(td);
            }
     }
}

/*
函数：计算年龄
*/
function getAge() {
	//由考生完成
	var birthday;
	for (var i = 0; i < data.datas.length; i++) {
		birthday = data.datas[i].birthday.substr(0, 4);
		data.datas[i].age = 2020 - parseInt(birthday);
	}
}

/*
函数：只显示女性
*/
function showGirl() {
	//由考生完成
	var tbody = document.querySelector('tbody');
	var tr = tbody.querySelectorAll('tr');
	// for(var i=0;i< data.datas.length;i++){
	//	var sex = data.datas[i].sex;
	// 	if(sex != '女'){
	// 		tbody.removeChild(tbody.children[i]);
	// 	}
	// }

	for (var i = data.datas.length - 1; i >= 0; i--) {
//		console.log(i)
		var sex1 = data.datas[i].sex;
//		console.log(sex1)
		if (sex1 != '女') {
			tbody.removeChild(tbody.children[i]);
		}
	}
}

/*
函数：增加性别字段
内置函数，禁止修改！
*/
function addField() {
	var fieldCode = "sex";
	var fieldText = "性别";
	data.title[fieldCode] = fieldText;
	for (var ind in data.datas) {
		var ran = Math.round(Math.random() * 10);
		var fieldValue = (ran <= 5) ? "男" : "女";
		data.datas[ind][fieldCode] = fieldValue;
	}
	alert("性别字段添加完成！");
}

style.css

body {
	margin: 0;
	font: 12px "arial", "微软雅黑", "宋体";
	background: #FFF;
	cursor: default;
}

#toolBar {
	height: 30px;
	background: #ECF5FF;
	border-bottom: 1px solid #91B7D7;
	margin: 0px 0px 20px 0px;
}

#toolBar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#toolBar li {
	float: left;
	width: 200px;
	height: 30px;
	line-height: 30px;
	border-left: 1px solid #FFF;
	border-right: 1px solid #91B7D7;
	padding-left: 10px;
	color: #004080;
	font-weight: bold;
	cursor: pointer;
}

#toolBar li:hover {
	background: #FFFFDD;
	color: #6A3500;
}

#toolBar .des {
	font-weight: normal;
	color: #C00;
}

#container {
}
table {
	width: 500px;
	margin: 100px auto;
	border-collapse: collapse;
	text-align: center;
}

td,
th {
	border: 1px solid #333;
}

thead tr {
	height: 40px;
	background-color: #ccc;
}

data.js

var data = {
	title:{name:"姓名",age:"年龄",birthday:"出生日期"},
	datas:[
		{name:"黎明",age:"",birthday:"1952-01-01"},
		{name:"黎明1",age:"",birthday:"1945-01-01"},
		{name:"黎明2",age:"",birthday:"1989-01-01"},
		{name:"黎明3",age:"",birthday:"1980-10-01"},
		{name:"黎明4",age:"",birthday:"1976-01-01"},
		{name:"黎明5",age:"",birthday:"1952-09-01"},
		{name:"黎明6",age:"",birthday:"1922-08-01"},
		{name:"黎明7",age:"",birthday:"1945-07-01"},
		{name:"黎明8",age:"",birthday:"1934-02-01"},
		{name:"黎明9",age:"",birthday:"1968-01-01"},
		{name:"黎明10",age:"",birthday:"1959-04-01"},
		{name:"黎明11",age:"",birthday:"1952-01-01"},
		{name:"黎明12",age:"",birthday:"1951-05-01"},
		{name:"黎明13",age:"",birthday:"1957-12-21"},
		{name:"黎明14",age:"",birthday:"1977-11-01"},
		{name:"黎明15",age:"",birthday:"1978-01-01"},
		{name:"黎明16",age:"",birthday:"1979-01-01"},
		{name:"黎明17",age:"",birthday:"1980-01-01"},
		{name:"黎明18",age:"",birthday:"1921-01-01"},
		{name:"黎明19",age:"",birthday:"1991-01-01"},
		{name:"黎明20",age:"",birthday:"1992-11-01"},
		{name:"黎明21",age:"",birthday:"1993-01-01"},
		{name:"黎明22",age:"",birthday:"1994-01-01"},
		{name:"黎明23",age:"",birthday:"1978-01-01"},
		{name:"黎明24",age:"",birthday:"2000-01-01"},
		{name:"黎明25",age:"",birthday:"2002-01-01"},
		{name:"黎明26",age:"",birthday:"2003-01-01"}
	]
};

在这里插入图片描述

失忆症患者_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中DOM操作训练——数据的增删改查

题目概述：已知有一套JSON格式的人员数据表基于该表，实现网页方式的列表显示、计算年龄、重新加载等功能================================================环境支持：IE 7+ Firefox================================================技术范畴：JavaScript JSON DOM CSS================================================详细说明：
复制链接

扫一扫