零基础JavaScript任务Task3

原创于 2019-06-28 20:49:24 发布 · 334 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #基础入门

js训练专栏收录该内容

7 篇文章

订阅专栏

本文介绍使用JavaScript在网页上实现城市空气质量数据的输入、验证、显示和删除功能。通过正则表达式验证输入，利用DOM操作更新表格，提供用户友好的数据管理体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编译器 Visual Studio Code
浏览器 Google Chrome

任务：

参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据
html任务片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;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" onclick="init()">确认添加</button>
        </div>
        <table id="aqi-table">
        </table>
        <script src="js/task.js" type="text/javascript"></script>
    </body>
</html>

js任务片段

/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};
/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
}
/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
}
/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
}
/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle() {
  // do sth.
  renderAqiList();
}
function init() {
  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
}
init();

任务开始

第一步：搞清楚所给js片段的步骤
(1) init() 用于获取点击。
当增加数据时：
(2) addBtnHandle() 跳转"驿站"
(3) addAqiData() 获取输入框信息，增加数据。
(4) renderAqiList() 更新表格。
当删除数据时：
(2) delBtnHandle() 删除目标节点。
(3) renderAqiList() 更新表格。

第二步：完善相应函数
(1) 完善init()

function init() 
{
    //按钮点击增加
    var btnAdd = document.getElementById("add-btn");    
    btnAdd.onclick = addBtnHandle;   //跳至addBtnHandle()
    //按钮点击删除（先有数据才有后面的删除）
    var table = document.getElementById("aqi-table");
    var arrBtnDel = table.getElementsByClassName("del-btn");
    //addEventListener(event,function,useCapture)
    table.addEventListener("click", function(e)       
    {
        if (e.target && e.target.nodeName === "BUTTON") 
        {
            delBtnHandle(e.target);   //跳至delBtnHandle()
        }
    })
}

当数据增加时
(2) 代码在任务片段已给出
(3) 完善addAqiData()

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]+$/)) //A-Za-z大小写字母\u4E00-\u9FA5中文^和+$联用
    {
        alert("城市名必须为中英文字符！");
        return;      
    }
    if (!strAqi.match(/^\d+$/))     //\d匹配一个数字字符。
    {         
        alert("空气质量指数必须为整数！");
        return;
    }
    //定义相应对象的属性值
    aqiData[strCity] = strAqi;
}

(4) 完善renderAqiList()

function renderAqiList() 
{
    var table = document.getElementById("aqi-table");
    table.innerHTML = "";
    for (var strCity in aqiData)    //循环strCity个
    {
        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);           //td1接到tr
        var td2 = document.createElement("td");  
        td2.innerHTML = aqiData[strCity];   //空气质量
        tr.appendChild(td2); 
        var td3 = document.createElement("td");
        td3.innerHTML = "<button class='del-btn'>删除</button>";    //创建删除按钮class应用多个
        tr.appendChild(td3);    
        table.appendChild(tr);   //接到文档里，不再是孤儿
    } 
}

当删除数据时
(2) 完善delBtnHandle()

function delBtnHandle(target) 
{
    var tr = target.parentElement.parentElement;   //"tr"
    var strCity = tr.children[0].innerHTML;    //获取第一个子元素的值
    delete aqiData[strCity];
    renderAqiList();   //更新表格显示
}

(3) 雷同

任务结束

完整js代码

var aqiData = {};

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;
}

function renderAqiList() 
{
    var table = document.getElementById("aqi-table");
    table.innerHTML = "";
    for (var strCity in aqiData)    //循环strCity个
    {
        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);           //td1接到tr
        var td2 = document.createElement("td");  
        td2.innerHTML = aqiData[strCity];   //空气质量
        tr.appendChild(td2); 
        var td3 = document.createElement("td");
        td3.innerHTML = "<button class='del-btn'>删除</button>";    //创建删除按钮class应用多个
        tr.appendChild(td3);    
        table.appendChild(tr);   //接到文档里，不再是孤儿
    } 
}

function addBtnHandle() 
{
    addAqiData();
    renderAqiList();
}

function delBtnHandle(target) 
{
    var tr = target.parentElement.parentElement;   //"tr"
    var strCity = tr.children[0].innerHTML;    //获取第一个子元素的值
    delete aqiData[strCity];
    renderAqiList();   //更新表格显示
}

function init() 
{
    var btnAdd = document.getElementById("add-btn");
    btnAdd.onclick = addBtnHandle;
    var table = document.getElementById("aqi-table");
    var arrBtnDel = table.getElementsByClassName("del-btn");
    //addEventListener(event,function,useCapture)
    table.addEventListener("click", function(e)       
    {
        if (e.target && e.target.nodeName === "BUTTON") 
        {
            delBtnHandle(e.target);   //删除目标节点
        }
    })
}
init();