表格操作

Posted 2020-10-18 carol72

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格操作相关的知识，希望对你有一定的参考价值。

需求：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;
}

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();
	}
}

以上是关于表格操作的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——git命令操作一个完整流程

片段内的表格布局

VSCode自定义代码片段15——git命令操作一个完整流程

雷林鹏分享：Apache POI电子表格/Spreadsheet