表格记录添加删除

最新推荐文章于 2022-02-18 22:53:53 发布

迹然

最新推荐文章于 2022-02-18 22:53:53 发布

阅读量127

点赞数

分类专栏：前端文章标签： table

本文链接：https://blog.csdn.net/weixin_42199230/article/details/100856623

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
    <div class="container">

        <table class="table table-bordered" id="biao">
            <thead>
            <tr >
                <td>其它</td>
                <td>其它</td>
                <td>其它</td>
                <td>其它</td>
            </tr>
            </thead>
            <tbody>
            <tr class="jilu">
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
            </tr>
            <tr class="jilu">
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
            </tr>
            <tr class="jilu">
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
                <td>记录</td>
            </tr>
            </tbody>
        </table>
        <div class="text-center">
            <button class="btn btn-warning text-center" onclick="tian()">添加</button>
            <button class="btn btn-danger text-center" onclick="shan()">删除</button>
        </div>
    </div>
    <script>
        var a=document.getElementById("biao");

        function tian() {
            a.innerHTML+='<tr><td>dasds</td><td>新增02</td><td>新增03</td><td>新增03</td></tr>'
        }
        function shan() {
            var tradd=a.deleteRow(4);
            tradd.innerHTML='<td>dasds</td><td>新增02</td><td>新增03</td><td>新增03</td>'
        }
    </script>
</body>
</html>