前言：
本人目前还属于小白阶段，代码排版和语言组织不到之处敬请见谅并给予指正；
代码比较简单，注释就没写了。如果看不懂的话可以留言给我（不知道简书可以提问不，我初用还没去了解有哪些功能，不行的话加我qq：416506304）
以下属于个人原创，转载请注明出处。
一、首先实现下图表单及控件
二、在表单基础上，在页面下方添加一个table表格，将表单录入的信息存入下方表格中。如下图所示：
三、设计全选和反选的功能实现，并实现操作中删除一行数据和删除全部的实现。
=================================分隔符=================================
css外部样式表部分（主要实现功能，样式什么的就懒得弄了）：
#table {
width: 350px;
}
td {
width: 160px;
}
input {
width: 50px;
}
span {
color: red;
}
#name{
width: 80px;
}
#reset {
margin-left: 50px;
}
#tijiao {
margin-left: 80px
}
#del{
width: 100px;
margin-left: 150px;
}
=================================分隔符=================================
html和js部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script type="text/javascript">
function dosubmit(){
var table2=document.getElementById("table2");
var row_index=table2.rows.length-1;
var newtable=table2.insertRow(row_index);
var name=document.getElementById("name").value;
var rad=document.getElementsByName("sex");
var sex="";
for(var i=0;i<rad.length;i++){
if(rad[i].checked){
sex=rad[i].value;
}
}
var bdate=document.getElementsByName("date");
var year="";
var month="";
for(var i=0;i<bdate.length;i++){
year=bdate[i].value;
month=bdate[i+1].value;
break;
}
var bcity=document.getElementById("province").value;
//每行插入单元格
var cell1 = newtable.insertCell(0);
var cell2 = newtable.insertCell(1);
var cell3 = newtable.insertCell(2);
var cell4 = newtable.insertCell(3);
var cell5 = newtable.insertCell(4);
var cell6 = newtable.insertCell(5);
/*为每个表格单元设置标签内容*/
cell1.innerHTML = "<input type='checkbox' onclick='single()' name='single'/>";
cell2.innerHTML = name;
cell3.innerText = sex;
cell4.innerHTML = year+"年"+month+"月";
cell5.innerHTML = bcity;
cell6.innerHTML = "<input type='button' value='删除' onclick='delRow(this)' id='table2_del'/>";
}
//全选
function selall(){
var all=document.getElementById("all");
var table=document.getElementById("table2");
var singles=document.getElementsByName("single");
var maxdelleng=table.rows.length-2;
for(var i=0;i<singles.length;i++){
if(all.checked){
singles[i].checked=true;
}else{
singles[i].checked=false;
}
}
}
//单选
function single(){
var tag=0;
var all=document.getElementById("all");
//var table=document.getElementById("table2");
var sin=document.getElementsByName("single");
for(var i=0;i<sin.length;i++){
if(sin[i].checked==true){
tag++;
}
if(tag==sin.length){
all.checked=true;
}else{
all.checked=false;
}
}
}
//删除选中
function dell(){
var chk=document.getElementsByName("single");
var leng=document.getElementById("table2").rows.length;
var tab=document.getElementById("table2");
for(var i=leng-3;i>=0;i--){
if(chk[i].checked){
tab.deleteRow(i+1);
}
}
}
//操作删除
function delRow(obj){
var table2_del=document.getElementById("table2_del");
var parent=table2_del.parentElement.parentElement;
parent.parentElement.removeChild(parent);
}
</script>
</head>
<body>
<form onsubmit="return dosubmit()">
<table border="1" cellspacing="0" cellpadding="3" id="table" >
<tr>
<th colspan=" 2 ">
<h1>用户信息</h1>
</th>
</tr>
<tr>
<td><span>*</span>姓名</td>
<td><input type="text " value="小红 " id="name"/></td>
</tr>
<tr>
<td><span>*</span>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td><span>*</span>出生日期</td>
<td>
<input type="text" value="2014 " id="year" name="date"/>年
<input type="text" value="9 " id="month" name="date"/>月
</td>
</tr>
<tr>
<td><span>*</span>所在城市</td>
<td>
<select id="province">
<option value="广州" name="city">广州</option>
<option value="深圳" name="city">深圳</option>
<option value="上海" name="city">上海</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="重置 " id="reset"/>
<input type="button" value="提交 " id="tijiao" onclick="return dosubmit()"/>
</td>
</tr>
</table>
</form>
<h2 style="margin-left: 230px;">用户信息表格</h2>
<table border="1" cellspacing="0" id="table2">
<tr>
<th><input type="checkbox" id="all" onclick="selall()" />全选</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>所在城市</th>
<th>操作</th>
</tr>
<tr>
<td colspan="6"><input type="button" onclick="dell()" value="删除选中" id="del"/></td>
</tr>
</table>
</body>
</html
