百度前端技术学院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();

 

posted @ 2016-03-23 21:18  huansky  阅读(501)  评论(0)  编辑  收藏  举报