给空对象添加属性，拼接table,已经js中delete的用法 for in循环对象

最新推荐文章于 2022-12-07 22:13:49 发布

weixin_30451709

最新推荐文章于 2022-12-07 22:13:49 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Jerry-spo/p/6532645.html

版权

<!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加上了一对引号，这样转义出来的才是正确的城市名。

转载于:https://www.cnblogs.com/Jerry-spo/p/6532645.html

weixin_30451709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给空对象添加属性，拼接table,已经js中delete的用法 for in循环对象

<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head><body> <div> <label&g...
复制链接

扫一扫