任务十六：零基础JavaScript编码（四）

//定义一个对象
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
    //trim() 可以删除字符串前后的空格字符,但是中间的空格符却消除不了
    var strCity = document.getElementById("aqi-city-input").value.trim();
    var strAqi = document.getElementById("aqi-value-input").value.trim();
    //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
    if (!strCity.match(/^[A-Za-z\u4E00-\u9FA5]+$/)) {
        alert("城市名必须为中英文字符！");
        return;
    }
    if (!strAqi.match(/^\d+$/)) {
        alert("空气质量指数必须为整数！");
        return;
    }
    //定义相应对象的属性值
    aqiData[strCity] = strAqi;
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var table = document.getElementById("aqi-table");
    table.innerHTML = "";
    for (var strCity in aqiData) {
        if (table.children.length === 0) {
            table.innerHTML = "<tr> <td>城市</td> <td>空气质量</td> <td>操作</td> </tr>";
        }
        //创建一个tr对象
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        td1.innerHTML = strCity;
        tr.appendChild(td1);
        var td2 = document.createElement("td");
        td2.innerHTML = aqiData[strCity];
        tr.appendChild(td2);
        var td3 = document.createElement("td");
        td3.innerHTML = "<button class=‘del-btn‘>删除</button>";
        tr.appendChild(td3);
        table.appendChild(tr);
    }
}

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

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(target) {
    var tr = target.parentElement.parentElement;
    var strCity = tr.children[0].innerHTML;
    delete aqiData[strCity];
    renderAqiList();
}

function init() {
    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    var btnAdd = document.getElementById("add-btn");
    btnAdd.onclick = addBtnHandle;

    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    var table = document.getElementById("aqi-table");
    var arrBtnDel = table.getElementsByClassName("del-btn");

    table.addEventListener("click", function(e) {
        if (e.target && e.target.nodeName === "BUTTON") {
            delBtnHandle(e.target);
        }
    })
}
init();

var aqiData = {};
var city_input  = document.getElementById("aqi-city-input") ;
var value_input = document.getElementById("aqi-value-input");
var addBtn = document.getElementById("add-btn");
var table  = document.getElementById("aqi-table");
var delBtn = table.getElementsByTagName("button");

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
    //获取输入的内容
    //trim()去首尾空格
    var city  = city_input.value.trim() ;
    var value = value_input.value.trim();

    //标识，当都为真时才能进行添加操作
    var cityflag  = false;
    var valueflag = false;

    //正则匹配城市名称
    var regCity = /^[a-zA-Z\u4E00-\u9FA5]+$/ ;
    //正则匹配空气质量（整数）
    var regValue = /[\d*]/;

    //匹配城市
    if( !regCity.test(city) )
    {
        alert("城市名称必须是中英文字符！");
        city_input.value  = ‘‘;        //清除数据
    }
    else cityflag = true;

    //匹配空气质量指数
    if( !regValue.test(value) )
    {
        alert("空气质量指数必须为整数!");
        value_input.value = ‘‘;
    }
    else valueflag = true;

    if( cityflag && valueflag )
        aqiData[city]  = value ; 
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var tr = ‘<tr>‘+‘<td>‘+‘城市‘+‘</td>‘+‘<td>‘+‘空气质量‘+‘</td>‘+‘<td>‘+‘操作‘+‘</td>‘+‘</tr>‘;
    var i = 0;
    for ( var x in aqiData ){
        tr += ‘<tr>‘+‘<td>‘+x+‘</td>‘+‘<td>‘+aqiData[x]+‘</td>‘+‘<td>‘+"<button onclick=‘delBtnHandle(\""+x+"\")‘>"+‘删除‘+‘</button>‘+‘</td>‘+‘</tr>‘;
        }
    table.innerHTML = tr;
}

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

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(city) {
  // do sth.
  delete aqiData[city] ;
  renderAqiList();
}

window.onload = function () {
  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  addBtn.addEventListener("click",addBtnHandle);
}