<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0px auto;
padding: 0px;
}
#top1{
margin-top: 30px;
}
.tab{
margin-top: 30px;
width: 40%;
height: 100px;
}
.tab2{
margin-top: 30px;
width: 40%;
}
.tab2 td{
text-align: center;
border: solid black 1px;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<td>用户名:</td>
<td><input type="text" id="name" name="name" /></td>
<td><span id="sname"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" id="pwd" name="pwd" /></td>
<td><span id="spwd"></td>
</tr>
<tr align="center">
<td colspan="3"><input type="button" value="提交" id="btn1" οnclick="add()" /></td>
</tr>
</table>
<div id="top1" align="center">
<input type="button" id="btn2" value="批量删除" οnclick="dele(0)" />
<input type="button" id="btn3" value="全选" οnclick="quan()" />
<input type="button" id="btn4" value="反选" οnclick="fan()" />
</div>
<table id="tab2" class="tab2" cellpadding="0px" cellspacing="0px">
<tr>
<td></td>
<td>用户名</td>
<td>密码</td>
<td>操作</td>
</tr>
</table>
</body>
<script type="text/javascript">
function add(){
clearSpan();
var flag=true;
var names = document.getElementById("name").value;
var pwds = document.getElementById("pwd").value;
if(names==null || names.trim()==""){
flag=false;
document.getElementById("sname").innerHTML="<font color='red'>用户名不能为空</font>";
}
if(pwds==null || pwds.trim()=="" ||pwds.length<6){
flag=false;
document.getElementById("spwd").innerHTML="<font color='red'>密码长度大于6位且不为空</font>";
}
if(flag){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML="<input type='checkbox' name='chec' />";
var td2 = document.createElement("td");
td2.innerHTML=document.getElementById("name").value;
var td3 = document.createElement("td");
td3.innerHTML=document.getElementById("pwd").value;
var td4 = document.createElement("td");
td4.innerHTML="<a href='#' οnclick='del(this)'>操作</a>";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
document.getElementById("tab2").appendChild(tr);
}
}
function del(aa){
aa.parentNode.parentNode.remove();
}
function dele(cao){
var p = cao;
var chen = document.getElementsByName("chec");
for (var i = 0; i < chen.length; i++) {
if(chen[i].checked==true){
var tr = chen[i].parentNode.parentNode
tr.parentNode.removeChild(tr);
i=-1;
p++;
}
}
if(p==0){
alert("至少选中一行")
}
}
function fan(){
var chen = document.getElementsByName("chec");
for (var i = 0; i < chen.length; i++) {
chen[i].checked=!chen[i].checked
}
}
function quan(){
var chen = document.getElementsByName("chec");
for (var i=0; i<chen.length;i++) {
chen[i].checked=true;
}
}
function clearSpan(){
var arr = document.getElementsByTagName("span");
for(var i = 0; i < arr.length; i++){
arr[i].innerHTML = "";
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0px auto;
padding: 0px;
}
#top1{
margin-top: 30px;
}
.tab{
margin-top: 30px;
width: 40%;
height: 100px;
}
.tab2{
margin-top: 30px;
width: 40%;
}
.tab2 td{
text-align: center;
border: solid black 1px;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<td>用户名:</td>
<td><input type="text" id="name" name="name" /></td>
<td><span id="sname"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" id="pwd" name="pwd" /></td>
<td><span id="spwd"></td>
</tr>
<tr align="center">
<td colspan="3"><input type="button" value="提交" id="btn1" οnclick="add()" /></td>
</tr>
</table>
<div id="top1" align="center">
<input type="button" id="btn2" value="批量删除" οnclick="dele(0)" />
<input type="button" id="btn3" value="全选" οnclick="quan()" />
<input type="button" id="btn4" value="反选" οnclick="fan()" />
</div>
<table id="tab2" class="tab2" cellpadding="0px" cellspacing="0px">
<tr>
<td></td>
<td>用户名</td>
<td>密码</td>
<td>操作</td>
</tr>
</table>
</body>
<script type="text/javascript">
function add(){
clearSpan();
var flag=true;
var names = document.getElementById("name").value;
var pwds = document.getElementById("pwd").value;
if(names==null || names.trim()==""){
flag=false;
document.getElementById("sname").innerHTML="<font color='red'>用户名不能为空</font>";
}
if(pwds==null || pwds.trim()=="" ||pwds.length<6){
flag=false;
document.getElementById("spwd").innerHTML="<font color='red'>密码长度大于6位且不为空</font>";
}
if(flag){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML="<input type='checkbox' name='chec' />";
var td2 = document.createElement("td");
td2.innerHTML=document.getElementById("name").value;
var td3 = document.createElement("td");
td3.innerHTML=document.getElementById("pwd").value;
var td4 = document.createElement("td");
td4.innerHTML="<a href='#' οnclick='del(this)'>操作</a>";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
document.getElementById("tab2").appendChild(tr);
}
}
function del(aa){
aa.parentNode.parentNode.remove();
}
function dele(cao){
var p = cao;
var chen = document.getElementsByName("chec");
for (var i = 0; i < chen.length; i++) {
if(chen[i].checked==true){
var tr = chen[i].parentNode.parentNode
tr.parentNode.removeChild(tr);
i=-1;
p++;
}
}
if(p==0){
alert("至少选中一行")
}
}
function fan(){
var chen = document.getElementsByName("chec");
for (var i = 0; i < chen.length; i++) {
chen[i].checked=!chen[i].checked
}
}
function quan(){
var chen = document.getElementsByName("chec");
for (var i=0; i<chen.length;i++) {
chen[i].checked=true;
}
}
function clearSpan(){
var arr = document.getElementsByTagName("span");
for(var i = 0; i < arr.length; i++){
arr[i].innerHTML = "";
}
}
</script>
</html>