点击实现自动排序的小项目作业

今日份小项目：
功能：点击后将数据从大到小或者从小到大进行排序
top：类似淘宝天猫的销量，热卖点击排序功能

话不多说，开始！！
css部分代码：

<style type="text/css">
			#table{
				width: 600px;
				border: #CCCCCC 1px solid;
				border-collapse: collapse;
			}
			td,th{
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border: #CCCCCC solid 1px;
				cursor: pointer;
			}
		</style>

因为我们要进行的是动态添加，所以先将大致的模板写出来，做到心里有数

开始写js

//先定义一个数组对象
var userListData=[{
				id:1,
				name:"张三",
				age:19,
				num:3,
				score:66
			},{
				id:2,
				name:"李四",
				age:11,
				num:5,
				score:13
			},{
				id:3,
				name:"王五",
				age:9,
				num:2,
				score:99
			},{
				id:4,
				name:"赵六",
				age:"13",
				num:4,
				score:88
			}]

接下来写一个生成表头的函数

//写一个生成表头的函数
			
	function theadFn(){
	var thead=document.createElement("thead");
	var theadHtml=`<tr>
						<th type="name">姓名</th>
						<th type="age">年龄</th>
						<th type="num">学号</th>
						<th type="score">分数</th>
					</tr>`
	thead.innerHTML=theadHtml;
	return thead;
}

然后我们写一个生成表格的函数

//生成表格内容
	function tbodyFn(userListData){
	var tbody=document.createElement("tbody");
	var tbodyHtml="";
		for(var i=0;i<userListData.length;i++){
			tbodyHtml+=`<tr>
					<td>${userListData[i].name}</td>
					<td>${userListData[i].age}</td>
					<td>${userListData[i].num}</td>
					<td>${userListData[i].score}</td>
				</tr>`
				}
				tbody.innerHTML=tbodyHtml;
				return tbody;
			}

生成表格后，将开始生成的表头和数据加进去（dom元素操作）

var oTable=document.getElementById("table");
oTable.appendChild(theadFn());
oTable.appendChild(tbodyFn(userListData));

打开看看效果先

最后开始添加点击自动实现排序功能

var ths=document.getElementsByTagName("th");
	for(var i=0;i<ths.length;i++){
		ths[i].onclick=function(){
		//console.log(this.getAttribute("type"))
		var sortName=this.getAttribute("type")
			//if(this.flag==-1){
				//this.flag=1
			//}else{
				//this.flag=-1
			//}
			this.flag=this.flag==-1?1:-1
			//点击那个给那个添加一个flag属性
			var that=this;
			userListData.sort(function(a,b){
			var x=Number(a[sortName])
			var y=Number(b[sortName])
			if(x>y){
				return that.flag
				}else if(x<y){
					return -that.flag
				}else{
					return 0
				}
			})	
			var newTbody=tbodyFn(userListData)
			var	oldTbody=document.getElementsByTagName("tbody")[0]
			oTable.replaceChild(newTbody,oldTbody)
		}
	}

完成！！
附上完整的js部分代码：

		<script type="text/javascript">
			var userListData=[{
				id:1,
				name:"张三",
				age:19,
				num:3,
				score:66
			},{
				id:2,
				name:"李四",
				age:11,
				num:5,
				score:13
			},{
				id:3,
				name:"王五",
				age:9,
				num:2,
				score:99
			},{
				id:4,
				name:"赵六",
				age:"13",
				num:4,
				score:88
			}]
			//生成表头
			function theadFn(){
				var thead=document.createElement("thead");
				var theadHtml=`<tr>
						<th type="name">姓名</th>
						<th type="age">年龄</th>
						<th type="num">学号</th>
						<th type="score">分数</th>
					</tr>`
				thead.innerHTML=theadHtml;
				return thead
			}
			//生成表格内容
			function tbodyFn(userListData){
				var tbody=document.createElement("tbody");
				var tbodyHtml="";
				for(var i=0;i<userListData.length;i++){
					tbodyHtml+=`<tr>
					<td>${userListData[i].name}</td>
					<td>${userListData[i].age}</td>
					<td>${userListData[i].num}</td>
					<td>${userListData[i].score}</td>
				</tr>`
				}
				tbody.innerHTML=tbodyHtml;
				return tbody
			}
			var oTable=document.getElementById("table")
			oTable.appendChild(theadFn())
			oTable.appendChild(tbodyFn(userListData))
			var ths=document.getElementsByTagName("th");
			for(var i=0;i<ths.length;i++){
				ths[i].onclick=function(){
					console.log(this.getAttribute("type"))
					var sortName=this.getAttribute("type")
					// if(this.flag==-1){
					// 	this.flag=1
					// }else{
					// 	this.flag=-1
					// }
					this.flag=this.flag==-1?1:-1
					//点击那个给那个添加一个flag属性
					var that=this;
					userListData.sort(function(a,b){
						var x=Number(a[sortName])
						var y=Number(b[sortName])
						if(x>y){
							return that.flag
						}else if(x<y){
							return -that.flag
						}else{
							return 0
						}
					})	
					var newTbody=tbodyFn(userListData)
					var oldTbody=document.getElementsByTagName("tbody")[0]
					oTable.replaceChild(newTbody,oldTbody)
				}
			}
		</script>

最后的效果图