欢迎访问我的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源代码的更多相关文章

  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. [转] QML PinchArea

    本文转自安老师的博文:Qt Quick 事件处理之捏拉缩放与旋转 绪论 本文介绍在Android 等智能手机上的一个非常重要的手势:捏拉手势. 捏拉手势最早在苹果手机上得到应用,苹果还曾经尝试为此操作 ...

  2. Date工具类

    总结了下项目中常用的时间转化方法,目前就这么点啦,以后再慢慢添加,先储备起来,免得丢啦. package com.example.keranbin.testdemo; import android.u ...

  3. JVM问题排查工具：Serviceability-Agent介绍

    本文首发于微信公众号:javaadu 简单介绍 构建高性能的Java应用过程中,必然会遇到各种各样的问题,像CPU飙高.内存泄漏.应用奔溃,以及其他疑难杂症,这时可以使用Serviceability ...

  4. Node.js官方文档：到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)？

    译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...

  5. Asp.Net SignalR 使用记录 技术回炉重造-总纲 动态类型dynamic转换为特定类型T的方案 通过对象方法获取委托_C#反射获取委托_ .net core入门-跨域访问配置

    Asp.Net SignalR 使用记录   工作上遇到一个推送消息的功能的实现.本着面向百度编程的思想.网上百度了一大堆.主要的实现方式是原生的WebSocket,和SignalR,再次写一个关于A ...

  6. spring boot缓存excel临时文件后再操作

    1. 引入poi的两个依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi ...

  7. spring项目使用mave将第三方jar包打进war包中

    背景:一个标准的ssm项目,需要使用到第三方jar,现需要将项目发布到liunx的服务器上,将项目打成war包,第三方war包也需要打进去 首先是直接打包,发现第三方jar包并没有打进去......蛋 ...

  8. vue - 基础(2)

    <div id="content"> {{ msg }} <div v-text="msg"></div> <div ...

  9. LOJ 3120: 洛谷 P5401: 「CTS2019 | CTSC2019」珍珠

    题目传送门:LOJ #3120. 题意简述: 称一个长度为 \(n\),元素取值为 \([1,D]\) 的整数序列是合法的,当且仅当其中能够选出至少 \(m\) 对相同元素(不能重复选出元素). 问合 ...

  10. Winform----自定义控件之半透明遮罩（蒙版遮盖指定控件）

    先贴运行效果图,源码点击这里下载 1.新建自定义控件 2.实现功能   namespace UserControlLib   {   [ToolboxBitmap(typeof(ZhLoading)) ...