版权声明：Faith can move mountains https://blog.csdn.net/qq_38809741/article/details/88267081
全选：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全选</title>
<style>
.container {
margin:0px auto;
width:500px;
}
</style>
<script>
window.onload=function(){
//获取多选框的值
var items=document.getElementsByName("items");
//全选/全不选
document.getElementById("all").onchange=function(){
for(var i=0;i<items.length;i++){
items[i].checked=this.checked;
}
}
//全选
document.getElementById("checkedAll").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=true;//选择
}
}
//全不选
document.getElementById("checkedNo").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
//反选
document.getElementById("checkRev").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
}
//提交
document.getElementById("submit").onclick=function(){
var result="";
for(var i=0;i<items.length;i++){
if(items[i].checked==true){
result+=items[i].value;
}
}
alert(result);
}
}
</script>
</head>
<body>
<form action="/" method="post">
<div class="container">
<label>你爱好的运动是？</label><input type="checkbox" name="name" id="all" />全选/全不选
<p>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="台球" />台球
</p>
<p>
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkRev" value="反选" />
<input type="button" id="submit" value="提交" />
</p>
</div>
</form>
</body>
</html>
动态添加员工：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#empAdd {
width: 600px;
margin: 10px auto;
padding: 10px 0px;
text-align: center;
}
#empAdd fieldset {
height: 100px;
}
.btn {
margin-top: 5px;
width: 60px;
}
.container {
margin: 20px auto;
width: 500px;
text-align: center;
}
table {
width: 500px;
}
table, th, td {
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
<script>
//表单验证
function valiDate(){
//获取输入框的值
var empId=document.getElementById("txtId");
var empName=document.getElementById("txtName");
var empJob=document.getElementById("txtJob");
//验证4位数字
var reg=/^\d{4}$/;
//验证
if(empId.value.trim().length==0){
alert("员工编号不能为空");
return false;
}else if(!reg.test(empId.value.trim())){
alert("员工编号必须为4位数字");
return false;
}else if(empName.value.trim().length==0){
alert("员工姓名不能为空");
return false;
}else if(empJob.value==0){
alert("请选择职位");
return false;
}else{
return true;
}
}
//添加员工
function empAdd(){
if(valiDate()){
//获取输入框的值
var empId=document.getElementById("txtId").value;
var empName=document.getElementById("txtName").value;
var empJob=document.getElementById("txtJob").value;
//创建员工对象
var emp=new Object();
emp.empId=empId;
emp.empName=empName;
emp.empJob=empJob;
showMsg(emp);
}
}
//创建节点
function showMsg(emp){
//获取元素节点添加的位置
var tbody=document.getElementById("tbContent");
//创建tr元素节点
var tr=document.createElement("tr");
//创建td
var td_select=document.createElement("td");
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("name","select");
td_select.appendChild(checkBox);
//员工编号
var td_id=document.createElement("td");
var txtId=document.createTextNode(emp.empId);
td_id.appendChild(txtId);
//员工姓名
var td_Name=document.createElement("td");
var txtName=document.createTextNode(emp.empName);
td_Name.appendChild(txtName);
//职位
var td_Job=document.createElement("td");
var txtJob=document.createTextNode(emp.empJob);
td_Job.appendChild(txtJob);
//删除
var td_Del=document.createElement("td");
var btnDel=document.createElement("input");
btnDel.setAttribute("type","button");
btnDel.setAttribute("value","删除");
btnDel.setAttribute("onclick","delEmp(this)");
td_Del.appendChild(btnDel);
//把td添加到tr中
tr.appendChild(td_select);
tr.appendChild(td_id);
tr.appendChild(td_Name);
tr.appendChild(td_Job);
tr.appendChild(td_Del);
//把tr添加到tbody中
tbody.appendChild(tr);
}
//删除单行员工
function delEmp(obj){
//获取tr
var trNode=obj.parentNode.parentNode;
//confirm():确认提示框
if(confirm("确定要删除吗?")){
trNode.parentNode.removeChild(trNode);
}
}
function selectAll(){
var all=document.getElementById("all");
//获取选择框
var selectArr=document.getElementsByName("select");
//遍历
for(var i=0;i<selectArr.length;i++){
selectArr[i].checked=all.checked;
}
}
//多选删除
function deleteEmp(){
//获取选择框
var selectArr=document.getElementsByName("select");
//创建一个数组，把每一个选择的员工存放到这个数组中
var arr=new Array();
for(var i=0;i<selectArr.length;i++){
if(selectArr[i].checked){
var del=selectArr[i].parentNode.parentNode;
arr.push(del);
}
}
//执行删除
for(var i=0;i<arr.length;i++){
document.getElementById("tbContent").removeChild(arr[i]);
}
}
</script>
</head>
<body>
<div id="empAdd">
<fieldset>
<legend><strong>添加员工</strong></legend>
<label>编号:</label>
<input type="text" size="15" id="txtId" name="empNo" value="" maxlength="4"
autofocus="autofocus" placeholder="请输入员工编号"/>
<label>姓名:</label>
<input type="text" size="15" id="txtName" name="empName" value=""
maxlength="20" placeholder="请输入姓名"/>
<label>职位:</label>
<select id="txtJob">
<option value="0" selected="selected">请选择</option>
<option value="程序员">程序员</option>
<option value="设计师">设计师</option>
<option value="项目经理">项目经理</option>
</select>
<br /><br />
<div>
<input type="submit" name="name" id="btnAdd" value="添加" onclick="empAdd();" />
<input type="reset" class="btn" id="btnReset" value="重置" />
</div>
</fieldset>
</div>
<div class="container">
<h1>员工管理</h1>
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" onchange="selectAll();" id="all" />全选</th>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbContent"></tbody>
</table>
<p id="empty">
</p>
<input type="button" name="name" id="btnDelete" onclick="deleteEmp();" value="删除员工" />
<script>
</script>
</div>
</body>
</html>