需求：1.添加数据（将填入的信息添加到表格中）
2.按照编号或者年龄排序
3.升序或者降序排序
4.移入移出隔行变色
5.全选
6.上移下移
7.删除
8.批量删除
HTML
<div class="box"> <p> <span>请输入名字：<input type="text" /></span> <span>请选择性别： <select> <option value="男">男</option> <option value="女">女</option> </select> </span> <span>请输入年龄：<input type="text" /></span> <input type="button" value="添加" id="add"/> </p> <p> 排序： <select> <option value="编号">编号</option> <option value="年龄">年龄</option> </select> <select> <option value="升序">升序</option> <option value="降序">降序</option> </select> <input type="button" value="排序" id="sort"/> </p> <p> 搜索： <input type="text" /> <input type="button" value="搜索" id="search"/> </p> <p> <input type="button" value="反选" id="fan"/> <input type="button" value="批量删除" id="many" /> </p> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th> <label> 全选 <input type="checkbox" id="allBtn"/> </label> </th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>1</td> <td>LEO</td> <td>男</td> <td>36</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>2</td> <td>MOMO</td> <td>男</td> <td>16</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>3</td> <td>鹿晗</td> <td>男</td> <td>26</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>4</td> <td>杨紫</td> <td>女</td> <td>25</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>5</td> <td>张一山</td> <td>男</td> <td>26</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> </table> </div>
CSS
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
margin: 30px auto 0;
}
.box input[type=text]{
width: 110px;
padding-left: 10px;
height: 20px;
}
.box p{
padding-bottom: 20px;
}
.box span{
margin-right: 10px;
}
.box table{
width: 100%;
border: 1px solid #000;
text-align: center;
border-left: 0;
}
th,td{
height: 30px;
border-left: 1px solid #000;
}
td{
border-top: 1px solid #000;
}
td label{
display: inline-block;
width: 100%;
height: 100%;
}
td>input{
float: left;
margin-left:20px;
}
JS
var oInput=document.getElementsByTagName("input");
var select1=document.getElementsByTagName("select");
var oTable=document.getElementsByTagName("table")[0];
var allBtn=document.getElementById("allBtn");
var searchBtn=document.getElementById("search");
var fanBtn=document.getElementById("fan");
var manyBtn=document.getElementById("many");
var tBody=oTable.tBodies[0];
var rows=tBody.rows;
var len=rows.length;
var oldColor="";
var num=0;
//定义一个临时容器，存储需要排序行对象。
var trArr=[];
colorFn();
fn();
//添加
oInput[2].onclick=function(){
if(oInput[0].value != ""&&oInput[1].value != ""){
//添加行
var tr=document.createElement("tr");
var str1=‘<td><label><input type="checkbox"/></label></td><td>‘+len+‘</td><td>‘+oInput[0].value+‘</td><td>‘+select1[0].value+‘</td>‘;
var str2=‘<td>‘+oInput[1].value+‘</td><td><input type="button" value="上移" /><input type="button" value="下移" /><input type="button" value="删除" /></td>‘;
tr.innerHTML=str1+str2;
tBody.appendChild(tr);
//添加信息后行数发生变化，事件、隔行变色，排序数组都需重置
//再次获取行数
len=rows.length;
colorFn();
fn();
sortFn();
moveFn();
}
}
//排序
sortFn();
function sortFn(){
//遍历原行集合，并将需要排序的行对象存储到临时容器中。
//i初始值等于1，去除标题行
for (var i=1;i<len;i++) {
trArr[i-1]=rows[i];
}
oInput[3].onclick=function(){
if(select1[1].value=="年龄"){
//数组按年龄排序
mySort(trArr,4);
}else{
//数组按编号排序
mySort(trArr,1);
}
//添加行
addTr();
//重置隔行变色
colorFn();
}
}
function addTr(){
//升序
if(select1[2].value=="升序"){
for (var i=0;i<trArr.length;i++) {
tBody.appendChild(trArr[i]);
}
}else{
//降序
for (var i=trArr.length-1;i>=0;i--) {
tBody.appendChild(trArr[i]);
}
}
}
//排序函数
function mySort(arr,a){
for (var i=0;i<arr.length;i++) {
for (var j=i+1;j<arr.length;j++){
//按照年龄数值排序，并转成整数。
if(parseInt(arr[i].cells[a].innerHTML)>parseInt(arr[j].cells[a].innerHTML)){
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
}
//搜索：当按名字、年龄、性别搜索到该行时，该行高亮
searchFn();
function searchFn(){
searchBtn.onclick=function(){
colorFn();
if(oInput[4].value==""){
alert("请输入要搜索的内容");
}else{
for (var i=1;i<len;i++) {
for (var j=0;j<rows[i].cells.length;j++) {
if(oInput[4].value==rows[i].cells[j].innerHTML){
rows[i].cells[j].parentNode.style.background="yellow";
}
}
}
}
}
}
//反选
fanFn();
function fanFn(){
fanBtn.onclick=function(){
var arr=[];
for (var i=1;i<len;i++) {
var check=rows[i].cells[0].children[0].children[0];
check.checked=!check.checked;
if(check.checked){
num++;
//当选中该行时
rows[i].style.background="#B13937";
oldColor="#B13937";
}else if(!check.checked){
num--;
//当取消选中该行时
if(rows[i].index%2==0){
oldColor="pink";
}else{
oldColor="#ccc";
}
rows[i].style.background=oldColor;
}
}
//当全部被选中后，全选按钮被选中，否则取消
if(num==len-1){
allBtn.checked=true;
}else{
allBtn.checked=false;
}
}
}
//批量操作
manyBtn.onclick=function(){
for (var i=1;i<len;i++) {
var check=rows[i].cells[0].children[0].children[0];
if(check.checked){
rows[i].style.display="none";
}
}
}
//上移，下移
moveFn();
function moveFn(){
for (var i=1;i<len;i++) {
var upBtn=rows[i].cells[5].children[0];
var downBtn=rows[i].cells[5].children[1];
var delBtn=rows[i].cells[5].children[2];
//上移
upBtn.onclick=function(){
//获得tBody
var parent=this.parentNode.parentNode.parentNode;
var pre=this.parentNode.parentNode.previousElementSibling;
var elem=this.parentNode.parentNode;
if(elem==tBody.rows[1]){
alert(‘到头了‘);
}else{
parent.insertBefore(elem,pre);
}
}
//下移
downBtn.onclick=function(){
var parent=this.parentNode.parentNode.parentNode;
var next=this.parentNode.parentNode.nextElementSibling;
var elem=this.parentNode.parentNode;
if(elem==tBody.lastElementChild){
alert(‘到尾了‘);
}else{
parent.insertBefore(elem,next.nextElementSibling);
}
}
//删除
delBtn.onclick=function(){
var parent=this.parentNode.parentNode.parentNode;
var elem=this.parentNode.parentNode;
parent.removeChild(elem);
len=rows.length;
colorFn();
}
}
}
//隔行变色
function colorFn(){
for (var i=1;i<len;i++) {
//隔行变色
if(i%2==0){
rows[i].style.background="pink";
}else{
rows[i].style.background="#ccc";
}
}
}
//事件函数
function fn(){
for (var i=1;i<len;i++) {
//鼠标移入
rows[i].index=i;
rows[i].onmouseover=function(){
//记录原先背景颜色值
oldColor=this.style.background;
//改变背景颜色
this.style.background="#A4A4A4";
}
//鼠标移出
rows[i].onmouseout=function(){
this.style.background=oldColor;
}
//点击选中
rows[i].cells[0].children[0].children[0].onclick=function(){
var Parent=this.parentNode.parentNode.parentNode;
if(this.checked){
num++;
//当选中该行时
Parent.style.background="#B13937";
oldColor="#B13937";
}else if(!this.checked){
num--;
//当取消选中该行时
if(Parent.index%2==0){
oldColor="pink";
}else{
oldColor="#ccc";
}
Parent.style.background=oldColor;
}
//当全部被选中后，全选按钮被选中，否则取消
if(num==len-1){
allBtn.checked=true;
}else{
allBtn.checked=false;
}
}
}
}
//点击全选
allBtn.onclick=function(){
//全部选中
if(this.checked){
num=5;
for (var i=1;i<len;i++) {
rows[i].children[0].children[0].children[0].checked=true;
rows[i].style.background="#B13937";
}
}else{
//全部取消
num=0;
for (var i=1;i<len;i++) {
rows[i].children[0].children[0].children[0].checked=false;
}
colorFn();
}
}