本文共 2075 字，大约阅读时间需要 6 分钟。
欢迎访问我的github：
做这道题目的时候遇到了很多困难。
1、怎么给空对象添加数据，愣是不知道从哪里下手；遍历对象，一个个输出操作；
2、中英文的正则表达式不知道，赶紧去百度；
3、在正则判断过程中，没有添加return，导致后面出现一系列异常。添加return之后，后面的函数不会继续运行，整个函数体提前结束，再重新开始；
4、条件运算符的?打成中文状态下的问号。也因为之前没有添加return，导致这里产生了错误。
5、就是怎么绑定事件动态删除一行数据。
6、js中call的用法以及自定义的data-city,用的时候是dataset.city;
index.html
IFE JavaScript Task 01
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="城市空气质量操作"; for (var i in aqiData){ if ( aqiData.hasOwnProperty(i)){ tr1= tr1+""+i+""+aqiData[i]+""; //要给删除按钮添加类，否则删除的时候就不好删除；先加单引号在双引号。 } } 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();
转载地址：http://ivmuz.baihongyu.com/