利用ul元素写的用户管理器

2023-12-16 22:16:47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul{ list-style-type: none;
        margin: 0;
        padding: 0;
        weight: 260px;
        boder: solid 1px #ccc;}

        ul>li{
        padding: 5px 10px;
        border-bottom: dashed 1px #ccc;

        }
        ul>li>span{
        display: inline-block;
        width: 80px;


        }

        ul>li:nth-child(1){
        font-weight: 700;
        background-color: #eee;
        border: 0;

        }
        #add{
        padding: 5px 10px;
        }
        #add>div>span{
        display: inline-block;
        width: 80px;
        text-align: right;

        }
        #add>div{
        margin: 10px 0;
        }


    </style>
</head>
<body>
<ul id="ul">
    <li><span>姓名</span><span>年龄</span></li>

</ul>
<div id="add">
    <div>
        <span>姓名:</span>
        <input type="text" id="name">
    </div>
    <div>
        <span>年龄:</span>
        <input type="text" id="age">
    </div>
    <div><span></span>
        <button id="bthA">增加</button>
    </div>
</div>
<script>

//定义一个数组
    var stu=[{name:'张三',age:20},
    {name:'李四',age:30}]
    function loadStu(){ var HTML="<li><span>姓名</span><span>年龄</span></li>";
    for(var i=0;i<stu.length;i++){
   HTML+='<li>';
   HTML+='<span>'+stu[i].name+'</span>';
    HTML+='<span>'+stu[i].age+'</span>';
     HTML+='</li>';
     document.getElementById('ul').innerHTML=HTML;
     }}
     loadStu();

     //获取培养按钮元素对象保存
     document.getElementById('bthA').οnclick=function(){
     //先获取文本框中输入的值
     var _name=document.getElementById('name').value;
     var _age=document.getElementById('age').value;
     //声明一个对象
     var _obj={};
     //设置对象的值

     _obj.name = _name;
     _obj.age = _age;
     //添加进数组
     stu.push(_obj);
     loadStu();


    }
</script>
</body>

效果图
在这里插入图片描述

文章来源:https://blog.csdn.net/qq_42307546/article/details/135037811
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。