Html添加和删除记录

最新推荐文章于 2022-11-13 23:17:40 发布

Monster X

最新推荐文章于 2022-11-13 23:17:40 发布

阅读量520

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_44329441/article/details/100892513

版权

源代码：需要引用Bootstrap框架和js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加记录</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function addOne() {

        var node = document.createElement("Tr");
        var aNode = document.createElement("Td");
        var Btm = document.createElement("td");
        var tbody = document.getElementById("tb");
        var textnode = document.createTextNode("你添加了一个td标签");

        Btm.innerHTML="<input type='button' value='删除' class='btn btn-danger' onclick='del(this)'>";

        aNode.appendChild(textnode);
        node.appendChild(aNode);
        node.appendChild(Btm);
        tbody.appendChild(node);
        
        document.getElementById("tab").appendChild(tbody);
    }
    function del(obj) {
        btnTrElement = obj.parentNode.parentNode;
        tbodyElemement = btnTrElement.parentNode;
        tbodyElemement.removeChild(btnTrElement);
    }
</script>
<div class="container">
<table id="tab" class="table table-striped">
<tbody id="tb">
<tr>
<td>这里有一行td</td></tr>
    </tbody>
</table>
    <input type="button" value="添加" onclick="addOne()" class="btn btn-primary" />
</div>

</body>
</html>