#上课记录# Day9表格的简单添加与删除_简单智课堂的测试测试记录怎么删-CSDN博客

本文链接：https://blog.csdn.net/qq_43455505/article/details/101001287

Day9表格的简单添加与删除

这次我们要通过js来做一个后端表格的基本添加与删除

效果
在这里插入图片描述
这里很粗浅的运用到了jQuery中的remove（）的方法
涉及一些关于获取标签元素组的一些概念
其中需要引用Bootstrap的框架和jQuery.js

<body >
<div class="center-block" style="width: 80%">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">一个学院管理教程</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">学员管理</a></li>
                    <li><a href="#">教师管理</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            其他管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">其他1</a></li>
                            <li><a href="#">其他2</a></li>
                            <li><a href="#">其他2</a></li>
                            <li class="divider"></li>
                            </li>
                        </ul>
            </div>
        </div>
    </nav>
    <div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>学院</td>
                <td>
                    <button type="button" class="btn btn-danger" onclick="Add()">添加</button>
                    <button type="button" class="btn btn-default" onclick="del()">删除</button>
                </td>
            </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>陌陌</td>
                    <td>102</td>
                    <td>xx学院</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>陌陌</td>
                    <td>102</td>
                    <td>xx学院</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>陌陌</td>
                    <td>102</td>
                    <td>xx学院</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>陌陌</td>
                    <td>102</td>
                    <td>xx学院</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>陌陌</td>
                    <td>102</td>
                    <td>xx学院</td>
                </tr>
            </tbody>

        </table>
    </div>
</div>
<script>
    var tbody = document.getElementById('tbody')
    function Add() {
        tbody.innerHTML =tbody.innerHTML + '<tr>\n' +
            '                <td>1</td>\n' +
            '                <td>陌陌</td>\n' +
            '                <td>102</td>\n' +
            '                <td>xx学院</td>\n' +
            '            </tr>'
    }
    function del() {
        var trs = document.getElementsByTagName('tr');
        trs[trs.length-1].remove()
    }
</script>