ife javascript task16 总结

具体任务详情可以点击这里

本次任务主要是实现了读取用户的输入数据自动创建表格并且可以删除的功能。

实现逻辑：

首先需要将输入的数据读出，然后存放在一个容器里，然后生成表格，将数据写入。删除行时，需要锁定这一行，然后删除容器里对应的数据，再重新根据容器里的数据生成新的表格。

###实现要点

1.数据的传递

这里我们将输入的数据用json进行存储，就像这样aqiData’＝{‘beijng’:’12’,’shanghai’:’120’},只需要将名称和数值对应存入即可。代码如下：

function addAqiData() {
    //正则匹配城市名称(中英文字符)
    var regCity = /^[a-zA-Z\u4E00-\u9FA5]+$/ ;
    //正则匹配空气质量（整数）
    var regValue = /[\d*]/;

    var cityName=$('aqi-city-input').value.trim();
    if(!cityName.match(regCity)){
        alert('cityName input error!');
        return false;
    }
    var airValue=$('aqi-value-input').value.trim();
    if(!airValue.match(regValue)){
        alert('value input error!');
        return false;
    }
    aqiData[cityName]=airValue;
    console.log(aqiData);
}

2.表格的生成

这个的话，使用createElement方法很容易做到，我们的逻辑是遍历json数组，然后每读出一组数据就生成一行表格。
代码如下：

function renderAqiList() {
    var trHead='<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>';
    $('aqi-table').innerHTML=trHead;
    for (var city in aqiData) {
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML =city;
        tr.appendChild(td1);
        var td2=document.createElement('td');
        td2.innerHTML=aqiData[city];
        tr.appendChild(td2);
        var td3=document.createElement('td');
        td3.innerHTML="<button class='del-btn'>delete</button>";
        tr.appendChild(td3);
        $('aqi-table').appendChild(tr);
    }
}

3.删除操作

这里需要通过target.nodeName来锁定点击的对象，再通过parentnElement向上锁定到tr节点，再更具其内容删除json中的数据即可。

 function delBtnHandle(target) {
    // do sth.
    var tr=target.parentElement.parentElement;
    var city=tr.children[0].innerHTML;
    delete  aqiData[city];
    renderAqiList();
}

4.回车键

当聚焦在第一个输入框时，按下回车焦点移至第二个输入框，当焦点在第二个输入框时，按下回车，生成表格。

$('aqi-city-input').onkeyup=function(ev){
        if(ev.keyCode==13){
            $('aqi-value-input').focus();
        }
    };
    $('aqi-value-input').onkeyup=function(ev){
        if(ev.keyCode==13){
            addBtnHandle();
        }
    };

完整代码

点击这里