百度前端技术学院task16源代码
欢迎访问我的github：huanshen
做这道题目的时候遇到了很多困难。
1、怎么给空对象添加数据，愣是不知道从哪里下手；遍历对象，一个个输出操作；
2、中英文的正则表达式不知道，赶紧去百度；
3、在正则判断过程中，没有添加return，导致后面出现一系列异常。添加return之后，后面的函数不会继续运行，整个函数体提前结束，再重新开始；
4、条件运算符的?打成中文状态下的问号。也因为之前没有添加return，导致这里产生了错误。
5、就是怎么绑定事件动态删除一行数据。
6、js中call的用法以及自定义的data-city,用的时候是dataset.city;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title> </head>
<body> <div>
<label>城市名称：<input id="aqi-city-input" type="text"></label><br>
<label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">确认添加</button>
</div>
<table id="aqi-table">
<!--
<tr>
<td>城市</td><td>空气质量</td><td>操作</td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>删除</button></td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>删除</button></td>
</tr>
-->
</table>
<script src="js/task2.16.others.js"></script>
</body>
</html>
task2.16.js
/**
* aqiData，存储用户输入的空气指数数据
* 示例格式：
* aqiData = {
* "北京": 90,
* "上海": 40
* };
*/
var aqiData = {};//创建一个对象
var city=document.getElementById('aqi-city-input');
var cvalue=document.getElementById('aqi-value-input');
/**
* 从用户输入中获取数据，向aqiData中增加一条数据
* 然后渲染aqi-list列表，增加新增的数据
*/
function addAqiData() {
city = city.value.trim();
cvalue= cvalue.value.trim();
if (!city.match(/^[A-Za-z\u4E00-\u9FA5]+$/)){
alert("城市名必须为中英文字符，请重新输入")
return;
}
if(!cvalue.match(/^\d+$/)){
alert("空气质量指数必须为整数,请重新输入");
return;
}
aqiData[city]=cvalue; } /**
* 渲染aqi-table表格
*/
function renderAqiList() {
var aqiTable=document.getElementById('aqi-table');
var tr1="";
var tr="<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";
for (var i in aqiData){
if ( aqiData.hasOwnProperty(i)){
tr1= tr1+"<tr><td>"+i+"</td><td>"+aqiData[i]+"</td><td><button data-city='"+city+"'>删除</button></td></tr>";
//要给删除按钮添加类，否则删除的时候就不好删除；先加单引号在双引号。
}
}
tr=tr+tr1;
aqiTable.innerHTML=i ? tr : "" ;//这里需要给个判断，不然每次调用这个函数都会有最上面一行。 } /**
* 点击add-btn时的处理逻辑
* 获取用户输入，更新数据，并进行页面呈现的更新
*/
function addBtnHandle() { addAqiData();
renderAqiList(); } /**
* 点击各个删除按钮的时候的处理逻辑
* 获取哪个城市数据被删，删除数据，更新表格显示
*/
function delBtnHandle() {
// do sth.
delete aqiData[city];//删除该对象之后，下一步就会重新运行renderAqiList,数据就会消失不见了
renderAqiList();
} function init() { // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数 // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数 var addBtn=document.getElementById('add-btn');
addBtn.addEventListener('click',addBtnHandle,false); document.getElementById("aqi-table").addEventListener("click", function(event){
if(event.target.nodeName.toLowerCase() === 'button') delBtnHandle.call(null, event.target.dataset.city);
})
} init();
百度前端技术学院task16源代码的更多相关文章
- 百度前端技术学院task35源代码——听指令的小方块3
任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...
- 百度前端技术学院task15源代码
这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...
- 百度前端技术学院task14源代码
刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> & ...
- 百度前端技术学院task13源代码
突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCT ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
随机推荐
- js中的原型,原型链和继承
在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript最 ...
- uni-app 无痛刷新 token 方法
为了给用户一个流畅的体验, token 过期后需要重新请求新的 token 替换过期的 token 前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 ...
- Spring面试专题之aop
1.背景 aop是编程中非常非常重要的一种思想,在spring项目中用的场景也非常广 2.面试问题 2.1.简单的面试问题 1.什么是aop,aop的作用是什么? 面向切面编程(AOP)提供另外一种角 ...
- 使用Git Flow规范！
Git Flow常用的分支 Production 分支 也就是我们经常使用的Master分支,这个分支最近发布到生产环境的代码,最近发布的Release, 这个分支只能从其他分支合并,不能在这个分支直 ...
- CentOS7下firewall-cmd防火墙使用
一. firewalld的基本使用启动: systemctl start firewalld查状态:systemctl status firewalld 停止: systemctl disable f ...
- HLOJ1366 Candy Box 动态规划（0-1背包改）
题目描述: 给出N个盒子(N<=100),每个盒子有一定数量的糖果(每个盒子的糖果数<=100),现在有q次查询,每次查询给出两个数k,m,问的是,如果从N个盒子中最多打开k个盒子(意思是 ...
- hasura graphql-engine + plv8 集成
hasura graphql-engine 是一款很不错的基于pg 的graphql 引擎,plv8 是pg 的一个扩展,我们可以使用js 编写 函数 ,触发器,而且对于es6 的语法也有比较完备的支 ...
- HashMap和HashTable本质性的区别
一,HashMap 1.HashMap是键值对key-value形式双列集合.它的底层存储原理是哈希表. 2.对应HashMap采用哈希表存储键值对元素的方式. HashMap.put(key,val ...
- pytest--运行指定的测试和参数化
mark pytest提供了标记机制,允许你使用marker对测试函数做标记,一个测试函数可以有多个marker,一个marker也可以用来标记多个测试函数 比如我们需要进行冒烟测试,不可能把所有的用 ...
- 【转】Redis为什么用跳表而不用平衡树？
Redis里面使用skiplist是为了实现sorted set这种对外的数据结构.sorted set提供的操作非常丰富,可以满足非常多的应用场景.这也意味着,sorted set相对来说实现比较复 ...