Day9表格的简单添加与删除
效果
这里很粗浅的运用到了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>