开始先导包...
//先建立输入框和按钮
用户:<input type="text" id="yhm" />
密码:<input type="text" id="pwd" />
邮箱:<input type="text" id="yx" />
<input type="button" id="tj" value="添加" />
<input type="button" id="duoxuan" value="批量删除" />
<br />
<hr />
//建立一个表格
<table id="tab" border="1px" cellpadding="0px" cellspacing="0px">
<tr style="background: yellow; color: red;">
<th><input type="checkbox" class="ck" id="qx"></th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
//开始调用script方法
<script>
//获取添加按钮的ID并且设置点击事件
$("#tj").click(function(){
//获取用户名框的输入内容并且判断
var name = $("#yhm").val();
if(name==""){
alert("用户名不能为空")
return;
}
//获取密码框内容并且判断
var pwd = $("#pwd").val();
if(pwd==""||pwd.length>6){
alert("密码不能为空或长度大于6")
return;
}
//获取邮箱输入框内容并且判断
var yx = $("#yx").val();
//判断输入的内容是否含有@字符
if(yx.indexOf("@")==-1){
alert("请输入正确的邮箱格式")
return;
}
//开始添加数据
$("#tab").append("<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+pwd+"</td><td>"+yx+"</td><td><input type='button' value='删除' id='sc' οnclick='sc(this)'></td></tr>")
//展示标题栏
$("#tab").show();
})
//设置删除的点击事件
function sc(t){
t.parentNode.parentNode.remove();
//一个判断删除的是不是最后一条内容如果是就隐藏整个表格
//有点缺陷隐藏了就出不来了
var $tr = $("input[type=checkbox]");
if($tr.length == 1) {
$("#tab").hide();
}
}
//设置批量删除的点击事件
$("#duoxuan").click(function(){
var pl = $("input[type=checkbox]:checked");
if(pl.length==0){
alert("请至少选择一个");
return
}
for(i=0;i<pl.length;i++){
var pls = pl[i];
pls.parentNode.parentNode.remove();
}
if(pls.length==1){
$("#tab").empty();
}
})
//设置一个flag来判断有没有选中
var flag = true;
$("#qx").click(function(){
var ckbox = $("input[type=checkbox]");
for(var i=0;i<ckbox.length;i++){
ckbox[i].checked=flag;
}
flag =!flag;
})
</script>