用DOM动态的修改网页

not sleepy

于 2023-04-06 14:55:18 发布

阅读量282

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_46615432/article/details/129989575

版权

1.文本框为空时报错

2.能增加信息删除信息

<!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>
</head>

<body>
    <hr>
    <div align="center" width="470">
        书名：<input type="text" name="bookname" id="bookname" style="width:70px;  " class="aaaaa">
        书号：<input type="text" name="booknumber" id="booknumber" style="width:70px; " class="aaaaa">
        价格：<input type="text" name="price" id="price" style="width:70px; " class="aaaaa">
        <input type="button" value="添加" id="addel">
    </div>
    <table align="center" border="1" cellspacing="2" id="mytable" width="470">

        <tr>
            <td>书名</td>
            <td>书号</td>
            <td>价格</td>
            <td></td>
        </tr>
        <tr>
            <td>计算机文化基础</td>
            <td>00001</td>
            <td>12.2</td>
            <td><button>删除</button></td>
        </tr>
        <tr>
            <td>JAVA面向对象设计</td>
            <td>00034</td>
            <td>98</td>
            <td><button>删除</button></td>
        </tr>
    </table>
</body>

<script>

    var tbody = document.querySelector('tbody');
    var bookname = document.getElementById("bookname");//获取书名节点
    var booknumber = document.getElementById("booknumber");//获取书号节点
    var price = document.getElementById("price");//获取书的价格
    var addel = document.getElementById("addel");//获取添加按钮节点
    var shuru = document.getElementsByClassName("aaaaa");//获取输入框

    for (let i = 0; i < shuru.length; i++) {//文本框在获得焦点时应清除内
        shuru[i].onfocus = function () {
            shuru[i].value = " ";
        }
    }




    addel.onclick = function () {


        var aa = bookname.value;
        if (aa.length != 0) {
            var newtr = document.createElement("tr");
            var td1 = document.createElement("td");//创建td元素标签
            var td1text = document.createTextNode(bookname.value);//创建元素内对应文本节点
            var td2 = document.createElement("td");//创建td元素标签
            var td2text = document.createTextNode(booknumber.value);
            var td3 = document.createElement("td");//创建td元素标签
            var td3text = document.createTextNode(price.value);
            var td4 = document.createElement("td");//创建td元素标签
            var td4text = document.createElement("button");
            var td4textr = document.createTextNode("删除");

            tbody.appendChild(newtr);
            newtr.appendChild(td1);
            newtr.appendChild(td2);
            newtr.appendChild(td3);
            newtr.appendChild(td4);
            td1.appendChild(td1text);
            td2.appendChild(td2text);
            td3.appendChild(td3text);
            td4.appendChild(td4text);
            td4text.appendChild(td4textr);

        } else {


            alert("输入不能为空")
        }


    }

    tbody.onclick = function (e) {//删除行
        tbody.removeChild(e.target.parentNode.parentNode);
    }


</script>

</html>