H5使用js追加表格进行操作

来源：互联网发布：linux 看目录本身权限编辑：程序博客网时间：2024/05/16 12:35

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.table td {
border: 1px solid black;
width: 100px;
background-color: white;
}
.table{
background-color: #000000;
}
</style>
</head>
<body>
<table>
<tr>
<td>账号</td>
<td><input type="text" class="user" id="user"/><span id="span_user"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" class="pwd" id="pwd"/><span id="span_pwd"></span></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="添加" onclick="add()"/></td>
</tr>
</table>
<br />
<br />
<hr />
<br />
<button onclick="del(0)">批量删除</button><button onclick="sel()">全选</button><button onclick="boo()">反选</button>
<table class="table" id="table" cellpadding="1px" cellspacing="0px">
<tr>
<td></td>
<td>用户名</td>
<td>密码</td>
<td>操作</td>
</tr>
</table>
<script>

function add(){
var user = document.getElementById("user").value;
var pwd = document.getElementById("pwd").value;
var table = document.getElementById("table");
if(haha(user,pwd)){
var td_user = document.createElement("td");
var td_pwd = document.createElement("td");
var td_ck = document.createElement("td");
var td_delete = document.createElement("td");
td_ck.innerHTML="<input name='che' type='checkbox'/>"
td_user.innerHTML=user;
td_pwd.innerHTML=pwd;
td_delete.innerHTML="<a onclick='del2(this)'>删除</a>"
var tr = document.createElement("tr");
tr.appendChild(td_ck);
tr.appendChild(td_user);
tr.appendChild(td_pwd);
tr.appendChild(td_delete);
table.appendChild(tr)
}
}
function haha(user,pwd){
var span_user = document.getElementById("span_user");
var span_pwd = document.getElementById("span_pwd");
if(user==""||user==null){
span_user.style.color="red"
span_user.innerHTML="账号不能为空"
return false;
}else{
span_user.innerHTML="";
}
if(pwd==""||pwd.length>6){
span_pwd.style.color="red"
span_pwd.innerHTML="密码不能为空并且要小于6位"
return false;
}else{
span_pwd.innerHTML="";
}
return true;
}
function sel(){
var ches = document.getElementsByName("che");
for (i=0;i<ches.length;i++) {
ches[i].checked=true
}
}
function boo(){
var ches = document.getElementsByName("che");
for (i=0;i<ches.length;i++) {
ches[i].checked=!ches[i].checked;
}
}
function del(suo){
var q=suo;
var ches = document.getElementsByName("che");
for (i=0;i<ches.length;i++) {
if(ches[i].checked){
ches[i].parentNode.parentNode.remove();
q++;
del(q);
}
}
if(q==0){
alert("请至少选中一行");
}
}
function del2(aa){
aa.parentNode.parentNode.remove();
}
</script>
</body>
</html>

阅读全文

0 0