实现功能:
1.上部添加的信息,点击提交后插入到下方表格
2.单行、多行、全部删除
3.重置、全选
**CSS:**
/* 全局字体 */
* {
font-size: 16px;
}
/* 全局列高度 */
td {
height: 30px;
}
/* 全局居中 */
table{
margin: 0px auto;
}
/* 删除全部按钮 */
#d3{
text-align: center;
}
#d4{
margin-right: 20px;
}
/* 上部表单 ------------------------------*/
span {
color: red;
margin-right: 5px;
}
/* 表头字体 */
#d1 #d11 th {
font-size: 25px;
}
/* 第一列宽度及距左边框距离 */
#d1 #d11 .t1 {
width: 100px;
padding-left: 10px;
}
/* 第二列宽度 */
#d1 #d11 .t2 {
width: 200px;
}
/* 表头居中 */
#d1 #d11 th {
text-align: center;
}
/* 性别输入框大小及内容字体 */
#d1 .c2 input {
width: 190px;
height: 15px;
font-size: 12px;
}
/* 出生日期选择框宽度、高度 */
#d1 .c4 .t2 input {
width: 35px;
height: 15px;
font-size: 12px;
}
/* 所在城市下拉框宽度 */
#d1 .c5 .t2 #city {
width: 80px;
}
/* 重置按钮位置 */
#d1 .c6 .t1 {
text-align: center;
}
/* 重置尺寸 */
#d1 .c6 input {
font-size: 12px;
width: 40px;
height: 25px;
}
/* 提交按钮位置 */
#d1 .c6 .t2 {
text-align: center;
}
/* 添加边框线并去除表格默认样式 */
table,
td,
th {
border: 1px #DCDCDC solid;
border-collapse: collapse;
}
/* 下部表单------------------------------ */
/* 表头字体 */
#d2 caption {
font-size: 25px;
font-weight: 550;
margin-bottom: 10px;
}
/* 勾选框宽度、居中 */
#d2 .c1 {
width: 80px;
text-align: center;
}
/* 姓名、性别 */
#d2 .c2,
#d2 .c3 {
width: 60px;
text-align: center;
}
/* 生日、城市 */
#d2 .c4,
#d2 .c5 {
width: 100px;
text-align: center;
}
/* 操作 */
#d2 .c6 {
width: 150px;
text-align: center;
}
/* 编辑、删除按钮 */
#d2 .c6 input {
background-color: rgba(0, 0, 0, 0);
border: none;
color: #8E67B2;
}
**HTML:**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
//动态向信息表中提交用户信息
function subInfo(){
// 获得对象的属性值
var name1 = document.getElementById("name").value;
//性别选择
var select =document.getElementsByName("sex")[0];
if (select.checked==true) {
var i = 0;
} else {
i = 1;
}
var sex1 = document.getElementsByName("sex")[i].value;
var year1 = document.getElementById("year").value;
var month1 = document.getElementById("month").value;
// 将提交的出生日期拼接成一个字符串
var birth = year1+"年"+month1+"月";
var city1 = document.getElementById("city").value;
//创建"行"节点对象
var tr = document.createElement("tr");
//设置行的内容
tr.innerHTML="<tr>"
+"<td class='c1'><input type='checkbox' name='check'/></td>"
+"<td class='c2'>"+name1+"</td>"
+"<td class='c3'>"+sex1+"</td>"
+"<td class='c4'>"+birth+"</td>"
+"<td class='c5'>"+city1+"</td>"
+"<td class='c6'><input type='button' value='编辑' class='cla2'/>|<input type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
+"</tr>";
// 添加数据到表中
document.getElementById("d2").appendChild(tr);
}
// 全选or全不选
function selectAll(){
//获得全选框对象
var a = document.getElementById("d211");
//获得其他复选框
var arr = document.getElementsByName("check");
if (a.checked==true) {//全选则其他框全部选中
for (var i = 0; i < arr.length; i++) {
arr[i].checked = true;
}
} else{//未全选则其他框都不选
for (var i = 0; i < arr.length; i++) {
arr[i].checked = false;
}
}
}
//单行删除
function delLine(obj){
var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
document.getElementById("d2").removeChild(tr);
}
//删除选中
function delSelect(){
// 获得复选框对象数组
var arr = document.getElementsByName("check");
// alert(arr);
var flag = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i].checked==true) {
flag = true;
//获得行的父节点,父节点调用删除方法删除子节点
var tr = arr[i].parentNode.parentNode;
document.getElementById("d2").removeChild(tr);
i--;//下标是动态变化的,后面的元素自动前移,所以要自减。
}
}
}
//删除其所有行
function delAll(){
// 获得复选框对象数组
var arr = document.getElementsByName("check");
for (var i = 0; i < arr.length; i++) {
var tr = arr[i].parentNode.parentNode;
document.getElementById("d2").removeChild(tr);
i--;
}
}
</script>
</head>
<body>
<form action="" method="" id="d1">
<table id="d11">
<tr class="c1">
<th colspan="2">用户信息</th>
<!-- <th></th> -->
</tr>
<tr class="c2">
<td class="t1"><span>*</span>姓名</td>
<td class="t2"><input type="text" name="" id="name" value="" /></td>
</tr>
<tr class="c3">
<td class="t1"><span>*</span>性别</td>
<td class="t2">
<input type="radio" name="sex" id="" value="男" checked="checked"/>男
<input type="radio" name="sex" id="" value="女" />女
</td>
</tr>
<tr class="c4">
<td class="t1"><span>*</span>出生日期</td>
<td class="t2">
<input type="text" name="" id="year" value="" />年
<input type="text" name="" id="month" />月
</td>
</tr>
<tr class="c5">
<td class="t1"><span>*</span>所在城市</td>
<td class="t2">
<select id="city">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="西安">西安</option>
</select>
</td>
</tr>
<tr class="c6">
<td class="t1">
<input type="reset" name="" id="reset" value="重置" />
</td>
<td class="t2">
<input type="button" name="" id="sub" value="提交" οnclick="subInfo()"/>
</td>
</tr>
</table>
</form>
<br />
<!-- 第二个表~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<table border="" cellspacing="" cellpadding="" id="d2">
<caption>用户信息表格</caption>
<tr id="d21">
<th class="c1"><input type="checkbox" name="" id="d211" value="" οnchange="selectAll()"/>全选</th>
<th class="c2">姓名</th>
<th class="c3">性别</th>
<th class="c4">出生日期</th>
<th class="c5">所在城市</th>
<th class="c6">操作</th>
</tr>
</table>
<div id="d3">
<input type="button" name="" id="d4" value="删除选中" οnclick="delSelect()"/>
<input type="button" name="" id="d5" value="清空表格" οnclick="delAll()"/>
</div>
</body>
</html>
运行效果: