JS对象简单操作_js 简单对象-CSDN博客

本文链接：https://blog.csdn.net/github_38927899/article/details/77142241

JS对象简单操作

实现的功能：
在输入框中输入信息，添加到表格中

实现效果如图所示：
这里写图片描述
代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body align="center">
<h1 style="color: lightsalmon">请添加联系人信息：</h1>
<hr>
<div class="div">
    姓名：<input type="text" value="">
    联系方式：<input type="text" value="">
    年龄：<input type="text" value="">
    <input type="button" value="添加用户" onclick="add_p()">
</div>
<div id="div" align="center"></div>
</body>
<script>
    var array=new Array();
    function add_p(){//添加用户
        var inp=document.getElementsByTagName("input");
        var p= {
            name:inp[0].value,
            news:inp[1].value,
            age:inp[2].value
        };
        array.push(p);
        look_p();
    }

    function look_p(){//查看（显示）用户
        var str="";
        str+="<hr>" +
                "<table border='2'>" +
                "<tr>" +
                "<td width='150'>姓名</td>" +
                "<td width='150'>联系方式</td>" +
                "<td width='150'>年龄</td>" +
                "<td width='80'>操作</td>" +
                "</tr>";
        for(var i=0;i<array.length;i++){
            str+="<tr>" +
                    "<td>"+array[i].name+"</td>" +
                    "<td>"+array[i].news+"</td>" +
                    "<td>"+array[i].age+"</td>" +
                    "<td><input type='button' value='删除' onclick='del_p("+i+")'></td>" +
                    "</tr>";
        }
        str+="</table>";
        var s=document.getElementById("div");
        s.innerHTML=str;
    }
    function del_p(num){
        array.splice(num,1);
        look_p();
    }
</script>
</html>