欢迎访问我的github：huanshen

做这道题目的时候遇到了很多困难。

1、怎么给空对象添加数据，愣是不知道从哪里下手；遍历对象，一个个输出操作；

2、中英文的正则表达式不知道，赶紧去百度；

3、在正则判断过程中，没有添加return，导致后面出现一系列异常。添加return之后，后面的函数不会继续运行，整个函数体提前结束，再重新开始；

4、条件运算符的?打成中文状态下的问号。也因为之前没有添加return，导致这里产生了错误。

5、就是怎么绑定事件动态删除一行数据。

6、js中call的用法以及自定义的data-city,用的时候是dataset.city;

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>IFE JavaScript Task 01</title>
  6.  
  7.   </head>
  8. <body>
  9.  
  10.   <div>
  11.     <label>城市名称：<input id="aqi-city-input" type="text"></label><br>
  12.     <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
  13.     <button id="add-btn">确认添加</button>
  14.   </div>
  15.   <table id="aqi-table">
  16.   <!--
  17.     <tr>
  18.       <td>城市</td><td>空气质量</td><td>操作</td>
  19.     </tr>
  20.     <tr>
  21.       <td>北京</td><td>90</td><td><button>删除</button></td>
  22.     </tr>
  23.     <tr>
  24.       <td>北京</td><td>90</td><td><button>删除</button></td>
  25.     </tr>
  26.    -->
  27.   </table>
  28.       <script src="js/task2.16.others.js"></script>
  29. </body>
  30. </html>

task2.16.js

  1. /**
  2.  * aqiData，存储用户输入的空气指数数据
  3.  * 示例格式：
  4.  * aqiData = {
  5.  *    "北京": 90,
  6.  *    "上海": 40
  7.  * };
  8.  */
  9.   var aqiData = {};//创建一个对象
  10.   var city=document.getElementById('aqi-city-input');
  11.   var cvalue=document.getElementById('aqi-value-input');
  12. /**
  13.  * 从用户输入中获取数据，向aqiData中增加一条数据
  14.  * 然后渲染aqi-list列表，增加新增的数据
  15.  */
  16. function addAqiData() {
  17.   city = city.value.trim();
  18.     cvalue= cvalue.value.trim();
  19.     if (!city.match(/^[A-Za-z\u4E00-\u9FA5]+$/)){
  20.         alert("城市名必须为中英文字符，请重新输入")
  21.         return;
  22.     }
  23.     if(!cvalue.match(/^\d+$/)){
  24.       alert("空气质量指数必须为整数,请重新输入");
  25.       return;
  26.     }
  27.     aqiData[city]=cvalue;
  28.  
  29. }
  30.  
  31. /**
  32.  * 渲染aqi-table表格
  33.  */
  34. function renderAqiList() {
  35.   var aqiTable=document.getElementById('aqi-table');
  36.   var tr1="";
  37.   var tr="<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";
  38.   for (var i in  aqiData){
  39.     if ( aqiData.hasOwnProperty(i)){
  40.        tr1= tr1+"<tr><td>"+i+"</td><td>"+aqiData[i]+"</td><td><button data-city='"+city+"'>删除</button></td></tr>";
  41.        //要给删除按钮添加类，否则删除的时候就不好删除；先加单引号在双引号。
  42.     }
  43.   }
  44.   tr=tr+tr1;
  45.   aqiTable.innerHTML=i ? tr : "" ;//这里需要给个判断，不然每次调用这个函数都会有最上面一行。
  46.  
  47. }
  48.  
  49. /**
  50.  * 点击add-btn时的处理逻辑
  51.  * 获取用户输入，更新数据，并进行页面呈现的更新
  52.  */
  53. function addBtnHandle() {
  54.  
  55.     addAqiData();
  56.     renderAqiList();
  57.  
  58. }
  59.  
  60. /**
  61.  * 点击各个删除按钮的时候的处理逻辑
  62.  * 获取哪个城市数据被删，删除数据，更新表格显示
  63.  */
  64. function delBtnHandle() {
  65.   // do sth.
  66.   delete aqiData[city];//删除该对象之后，下一步就会重新运行renderAqiList,数据就会消失不见了
  67.   renderAqiList();
  68. }
  69.  
  70. function init() {
  71.  
  72.   // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  73.  
  74.   // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
  75.  
  76.   var addBtn=document.getElementById('add-btn');
  77.   addBtn.addEventListener('click',addBtnHandle,false);
  78.  
  79.   document.getElementById("aqi-table").addEventListener("click", function(event){
  80.         if(event.target.nodeName.toLowerCase() === 'button') delBtnHandle.call(null, event.target.dataset.city);
  81.     })
  82. }
  83.  
  84. init();

百度前端技术学院task16源代码的更多相关文章

  1. 百度前端技术学院task35源代码——听指令的小方块3

    任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...

  2. 百度前端技术学院task15源代码

    这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...

  3. 百度前端技术学院task14源代码

    刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> & ...

  4. 百度前端技术学院task13源代码

    突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCT ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  7. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  8. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  9. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

随机推荐

  1. riscv 汇编与反汇编

    为了riscv指令集,我们需要汇编与反汇编工具来分析指令格式. 可以用下面的两个工具来汇编和反汇编,下载链接:https://pan.baidu.com/s/1eUbBlVc riscv-none-e ...

  2. 安装Docker报container-selinux >= 2.9错

    Docker装了无数次,还是会遇到如此熟悉的问题,知道他是版本需要更新,但是就是找不到对应的,在网上找了差不多一个下午都没弄好.发现平时还是要多动脑子才行,既然知道是版本需要更新,那么到官网直接找版本 ...

  3. 设置注释 idea

    https://blog.csdn.net/weixin_42679529/article/details/81059598 groovyScript("def result=''; def ...

  4. NBU磁带库报错代码

    Linux驱动报错"Sense Key"和"ASC and ASCQ"含义 1.Sense Keys Definitions 0x0 No sense 0x1 ...

  5. c++ c的拓展

    C++对c的拓展之, 引用和const关键字 bool类型关键字 C++中的布尔类型 C++在C语言的基本类型系统之上增加了bool C++中的bool可取的值只有true和false 理论上bool ...

  6. locust手机号批量注册性能测试

    from locust import TaskSet,task,HttpLocust from common.redisCon import redis_clusters import queue c ...

  7. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  8. woocommerce分类页产品数量修改

    我们用woocommerce建商城,不同的模板分类页产品数量不同,如果想要显示更多或更少的数量要如何修改呢?很简单,一行代码就能搞定!打开当前主题的function.php文件,加入如下代码,把18改 ...

  9. JAVA并发-同步器AQS

    什么是AQS aqs全称为AbstractQueuedSynchronizer,它提供了一个FIFO队列,可以看成是一个用来实现同步锁以及其他涉及到同步功能的核心组件,常见的有:ReentrantLo ...

  10. NOIP 2008 笨小猴

    洛谷 P1125 笨小猴 洛谷传送门 JDOJ 1539: [NOIP2008]笨小猴 T1 JDOJ传送门 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到 ...