前端任务task16

/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
var city=document.querySelector('#aqi-city-input').value.trim();
var num=document.querySelector('#aqi-value-input').value.trim();
if(RegExp(/^[a-zA-Z\u4e00-\u9fa5]{2,8}$/).test(city) && RegExp(/^[\d]{1,4}$/).test(num)){
//\u4e00-\u9fa5为中文字符Unicode编码
    aqiData[city]=num;
}else{
    alert('请重新输入');
}
return aqiData;
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
var oTa=document.querySelector('#aqi-table');
oTa.innerHTML='';
var item='<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>';
for(var city in aqiData){
    item+='<tr><td>'+city+'</td><td>'+aqiData[city]+'</td><td><button>删除</button></td></tr>';
}
oTa.innerHTML=item;
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(e) {
  // do sth.
 //if(dCity.)
 if(e.target.nodeName.toLowerCase() == 'button'){
//判断发生点击事件对象是否是button,坏处是每在table点击一次就要执行一次判断
     var dCity=e.target.parentNode.parentNode.firstChild.innerHTML;
     var ncity=null;
     for(var city in aqiData){
         if(dCity == city){
             ncity=city;
             break;  //break结束当前函数运行,return结束整个 
         }
     }
     delete aqiData[ncity];
      renderAqiList();
}
}

function init() {
window.onload=function(){
    var oBtn=document.querySelector('#add-btn');
    oBtn.addEventListener('click',addBtnHandle,false);
    var oTa=document.querySelector('#aqi-table');
    var button=oTa.getElementsByTagName('button');
    oTa.addEventListener('click',delBtnHandle,false); 
//在table内部添加一个点击事件
    
}
  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数

}

init();