<!DOCTYPE> <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"> </table> </body> <script> var data = {};//创建一个空对象 var table =document.getElementById("aqi-table"); var addBtn =document.getElementById("add-btn"); var value =document.getElementById("aqi-value-input"); var city =document.getElementById("aqi-city-input"); addBtn.onclick = function(){ getData();//当点击添加按钮的时候，获取数据（即填充data对象） rengerlist();//同时渲染表格 } function getData(){ var cityValue=city.value; var valueValue = value.value; data[cityValue] = valueValue;//把属性和值添加到空对象中 city.value = ''; value.value = ''; } function rengerlist(){ var str = "<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";//初始化表头； for(t in data){//for in 循环对象 str += "<tr><td>"+t+"</td><td>"+data[t]+"</td><td><button onclick = 'delbtnclick(""+t+"")'>操作</button></td></tr>";
//注意这里的转义。写法：“ 就是转义一个引号. table.innerHTML = str; } } function delbtnclick(city){ delete data[city];//删除一行数据，用data[city]指向这条数据。
rengerlist();
} </script> </html>
点击添加按钮，会去熏染表格，将数据添加到行，然后再同步到table上；
点击删除按钮，首先会在data对象中删掉这条数据，然后再回去rengerlist函数中，清空表格数据内容（表头是存在的，重新for in循环对象中的数据，然后再把data里现存的数据展示在表格里。
值得注意的是：我们点击哪个删除按钮，这个按钮就对应for in循环中的t;
编辑了一下：修改了以下几个地方：
<button onclick = 'delbtnclick(""+t+"")'>操作</button>
1、给函数加上了引号，这一点经常忘记；
2、转义的2个引号；
3、""+t+"" 给t加上了一对引号，这样转义出来的才是正确的城市名。