javascript 动态修改网页元素

最新推荐文章于 2023-11-23 16:00:46 发布

风澜舞

最新推荐文章于 2023-11-23 16:00:46 发布

阅读量1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38130747/article/details/115189829

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

编码

<!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>javascript动态操作</title>

    <script>
        function addRow(){
            // 动态增加表格行
            var table=document.getElementById("myTable");
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var tr = document.createElement("tr");
            var tbody = document.createElement("tbody");
            var td_id = document.createElement("td");
            var td_name = document.createElement("td");
            td_id.appendChild(document.createTextNode(id));
            td_name.appendChild(document.createTextNode(name));
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tbody.appendChild(tr);
            table.appendChild(tbody);
        }
    
        function setCity(){
            // 动态设置选项列表
            var citysString = "北京市 　广东省 　山东省 　江苏省 　河南省 　上海市 　河北省 　浙江省 　香港特别行政区 　陕西省 　湖南省 　重庆市 　福建省 　天津市 　云南省 　四川省 　广西壮族自治区 　安徽省 　海南省 　江西省 　湖北省 　山西省 　辽宁省 　台湾省 　黑龙江 　内蒙古自治区 　澳门特别行政区 　贵州省 　甘肃省 　青海省 　新疆维吾尔自治区 　西藏区 　吉林省 　宁夏回族自治区"
            var citys = citysString.split(" 　");
    
            var select = document.getElementById("areas");
            select.length = 1;  // 只能选择一个
            select.options[0].selected = true;  // 第一个为默认选中
            for(var i = 1; i <= citys.length; i++){
                var option = document.createElement("option");  // 创建节点
                option.setAttribute("value", i);    
                option.appendChild(document.createTextNode(citys[i-1]));    // 添加文本节点
                select.appendChild(option);
            }
    
    
        }
    
    
    </script>
</head>
<body onload="setCity()">
    编号：<input type="text" name="id" id="id"><br/>
    姓名：<input type="text" name="name" id="name"><br/>
    <input type="submit" value="增加" onclick="addRow()">

    <table id="myTable" border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
    </table>
    <hr/>
    城市：
    <select name="areas" id="areas">
        <option value="0">没有地区</option>
    </select>
</body>
</html>