练习：表格CRUD操作，类似购物车的实现

最新推荐文章于 2022-06-18 14:52:18 发布

海边拾贝seebit

最新推荐文章于 2022-06-18 14:52:18 发布

阅读量301

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/Ada_yangyang/article/details/81283797

版权

Web前端专栏收录该内容

54 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>表格CRUD操作</title>
    <script type="text/javascript">
        function addTR() {
            //1. 取三个文本框中的值
            var username = document.getElementById("username").value;
            var email = document.getElementById("email").value;
            var age = document.getElementById("age").value;
            //2. 找表格
            var tabNode = document.getElementById("tabInfo");
            //3. 产生tr，td节点
            var trNode = document.createElement("tr");
            var usernameTdNode = document.createElement("td");
            usernameTdNode.innerHTML = username;
            var emailTdNode = document.createElement("td");
            emailTdNode.innerHTML = email;
            var ageTdNode = document.createElement("td");
            ageTdNode.innerHTML = age;
            var opTdNode = document.createElement("td");
            opTdNode.innerHTML="<input type='button' value='删除' onclick=\"deleteTr(this);\"/>"
            //4. 在td节点中添加文本节点
            //5. 组织节点之间的关系
            trNode.appendChild(usernameTdNode);
            trNode.appendChild(emailTdNode);
            trNode.appendChild(ageTdNode);
            trNode.appendChild(opTdNode);
            tabNode.appendChild(trNode);
        }

        function deleteTr(inputParameters) {
            var trNode = inputParameters.parentNode.parentNode;
            trNode.parentNode.removeChild(trNode);
        }
    </script>
</head>
<body>
<table align="center" cellpadding="10" cellspacing="3">
    <tr>
        <td>姓名:<input type="text" id="username"/></td>
        <td>Email:<input type="text" id="email"/></td>
        <td>年龄:<input type="text" id="age"/></td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/> </td>
    </tr>
</table>
<br/>
<br/>
<br/>
<hr/>
<table id="tabInfo" align="center" width="500" border="1">
    <tr>
        <td>姓名</td>
        <td>Email</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
</table>
</body>
</html>