css html js 动态修改表格

最新推荐文章于 2024-02-29 12:39:55 发布

jialan75

最新推荐文章于 2024-02-29 12:39:55 发布

阅读量208

点赞数

分类专栏： CSS 文章标签： html css javascript

本文链接：https://blog.csdn.net/jialan75/article/details/122851682

版权

CSS 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 260px;
            /* border: solid 1px #ccc; */
         
        }
        ul>li{
            padding: 5px 10px;
            border-bottom: dashed 1px blue;
        }

        ul>li:nth-child(1){
            font-weight: 700;
            background-color: #ccc;
            border-bottom: dashed 0px blue;
        }
        ul>li>span{
            /* 转成块元素 */
            display: inline-block;
            width: 100px;


        }
        #add{
            padding: 5px 10px;
        }
        #add>div>span{
            display: inline-block;
            width: 60px;
            text-align: right;
        }
        #add>div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="stu">
        <ul id="ul"> 
        </ul>
    </div>
    <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="btnAdd">增加</button>
        </div>
    </div>
   
</body>
</html>
<script>
    function resHtml(stu) {
        var HTML = "";
        HTML += '<li>'
        HTML += '<span>'+stu.name+'</span>'
        HTML += '<span>'+stu.age+'</span>'
        HTML += '</li>'
        return HTML;
    }
     //定义一个数组
     var stu = [
            {
                name:'姓名',
                age:'年龄'
            },
            {
                name:'张三',
                age:20
            },
            {
                name:'小李',
                age:22
            },
        ]
    function show() {
        var HTML = "";
        for(var i=0;i<stu.length;i++){
            HTML += resHtml(stu[i])
        }
        document.getElementById("ul").innerHTML = HTML
    }   
    show();

    btnAdd = document.getElementById("btnAdd")

    btnAdd.onclick = function () {
        var _obj = {}
        _obj.name = document.getElementById("name").value
        _obj.age = document.getElementById("age").value
        stu.push(_obj);
        show()
    }
</script>

jialan75

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css html js 动态修改表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫

专栏目录