HTML DOM系列教材（十二）- 表格排序

HTML DOM系列教材（十一）- 常用场景

工具版本兼容问题

步骤 1 : 练习-表格排序
步骤 2 : 答案-表格排序

步骤 1 :

练习-表格排序

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

点击表头，实现排序效果

代码行数较多，请点击查看

<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
    
td{
width:25%;
text-align:center;
}
  
a{
  text-decoration: none;
  color:skyblue;
}  
  
</style>
<script>
var col = 0;
var reverse = false;
function sort(column){
 if(column == col)
     reverse = !reverse;
 col = column;
 var tbody = document.getElementById("tbody");
 //通过getElementsByTagName取出来是一个Collection
 var trsCollection =  document.getElementsByTagName("tr");
 //因为Collection没有自带的排序函数，所以需要转换为数组，利用数组自带的排序
 var trs =new Array();
 for (var i=1; i <trsCollection.length; i++) {
    trs.push(trsCollection[i]);
 }
 trs.sort(comparator);
 for (var i=0; i <trs.length; i++) {
  tbody.appendChild(trs[i]);
 }
}
function comparator(tr1,tr2){
   var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容
   var td2 = tr2.children[col].innerHTML;
   if(reverse)
    return td1.localeCompare(td2);
   else
    return td2.localeCompare(td1);
}
</script>
<table>
   <tbody id="tbody">
   <tr >
       <td ><a  href="javascript:void(0)"  onclick="sort(0)">id</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(1)">名称</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(2)">血量</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(3)">伤害</a></td>
    </tr>
   <tr >
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr >
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr >
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr >
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
    </tbody>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 2 :

答案-表格排序

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费5个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
    
td{
width:25%;
text-align:center;
}
  
a{
  text-decoration: none;
  color:skyblue;
}  
  
</style>
<script>
var col = 0;
var reverse = false;
function sort(column){
 if(column == col)
     reverse = !reverse;
 col = column;
 var tbody = document.getElementById("tbody");
 //通过getElementsByTagName取出来是一个Collection
 var trsCollection =  document.getElementsByTagName("tr");
 //因为Collection没有自带的排序函数，所以需要转换为数组，利用数组自带的排序
 var trs =new Array();
 for (var i=1; i <trsCollection.length; i++) {
    trs.push(trsCollection[i]);
 }
 trs.sort(comparator);
 for (var i=0; i <trs.length; i++) {
  tbody.appendChild(trs[i]);
 }
}
function comparator(tr1,tr2){
   var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容
   var td2 = tr2.children[col].innerHTML;
   if(reverse)
    return td1.localeCompare(td2);
   else
    return td2.localeCompare(td1);
}
</script>
<table>
   <tbody id="tbody">
   <tr >
       <td ><a  href="javascript:void(0)"  onclick="sort(0)">id</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(1)">名称</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(2)">血量</a></td>
       <td ><a  href="javascript:void(0)"  onclick="sort(3)">伤害</a></td>
    </tr>
   <tr >
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr >
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr >
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr >
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
    </tbody>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（十一）- 常用场景

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-29 参考答案的排序逻辑有一点 bug

虚心求学

关于前端部分-HTML DOM-表格排序的提问

我看到站长是使用 Array 对象的 sort 方法，并自定义比较器，比较器内部使用字符串对象的 localeCompare 方法。问题就出在使用 localeCompare 的方法：用来比较纯字符串没问题，但是比较 Number 的数值大小就有问题了。见截图。对于以下数据： 100 150 2 30 排序后依旧是其本身，排序结果（从小到大）：100 150 2 30 也就是，明明 2 比 100 小， localeCompare 却认为 2 比 150 “大”；原因： localeCompare 的方法，是基于字符串的比较，就算你是纯数字，它也视为字符串，然后按照首字符、第二个字符....的顺序比较各个数据，由于 150 的首个字符比 2 小，因此认为 2大于 150，尽管实际上 150 数值更大。解决办法：在自定义比较器内部可以用以下思路： 1.先判断是否为数值，是则进行数值大小的比较逻辑。 2.非1，则进行 localeCompare 的字符串比较逻辑。至于判断是否为数值有多种方法，可以用 typeof xxx ==== 'number' ?数字:非数字; 也可以用 Number.isNaN( parseFloat(xxx) ) ?非数字:数字; 如果为数值，就很简单了，直接返回 num1-num2; 如果为字符串，返回 str1.localeCompare( str2 );

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2024-07-29 利用 dom 实现表格排序

虚心求学

关于前端部分-HTML DOM-表格排序的提问

点击表头，实现排序

<html>
    <head>
         <script>
	//Hero 对象
	function Hero(id,name,hp,damage){
		this.id = id;
		this.name = name;
		this.hp = hp;
		this.damage = damage;
		// hero 对象转为 tr 的 dom 对象
		this.trDOM = function(){
			let row = new dom('tr');
			row.append('td',this.id);
			row.append('td',this.name);
			row.append('td',this.hp);
			row.append('td',this.damage);
			return row;
		}
	}
	//dom 对象
	function dom(tagName){
		this.element = undefined;
		if(typeof tagName == 'object')
			this.element = tagName;
		else 
		this.element = document.createElement(tagName);
		this.get = function(){
			return this.element;
		}
		this.set = function(sender){
			this.element = sender;
		}
		//添加一个子dom对象
		this.add = function(...ds){
			for(const d of ds)
			this.element.appendChild(d.element);
			
		}
		//根据标签名字添加一个子节点
		this.addnew = function(tagName){
			let child = document.createElement(tagName);
			this.element.appendChild(child);
		}
		//追加元素
		this.append = function(tagName,text,css){
			let child = new dom(tagName);
			if(text!=null)
			       child.setText(text);
			if(css!=null)
			       child.addAttribute('style',css);
			this.add(child);
		}
		//设置属性
		this.setAttribute = function(att){
			this.element.setAttributeNode(att);
		}
		//添加属性
		this.addAttribute = function(name,value){
			let att = document.createAttribute(name);
			att.nodeValue = value;
			this.setAttribute(att);
			return att;
		}
		this.removeAttribute = function(name){
			this.get().removeAttribute(name);
		}
		//设置内部文本
		this.setText = function(str){
			this.get().innerText = str;
		}		
		//获得内部文本
		this.getText = function(str){
			return this.get().innerText;
		}
		//返回子元素节点的数量
		this.count=function(){
			return this.element.children.length;
		}
		//返回子节点的数量
		this.countAll=function(){
			return this.element.childNodes.length;
		}
		//清空结点
		this.clear = function(nodeName){
			let nodes = this.nodesAt(nodeName);
			for(const n of nodes)
				this.get().removeChild(n.get());
		}
		//删除第一个匹配的节点
		this.remove=function(nodeName){
			var nodes = this.element.childNodes;
			this.get().removeChild(this.first(nodeName).get());
		}
		//删除最后一个匹配的节点
		this.removeLast=function(nodeName){
			var nodes = this.element.childNodes;
			this.get().removeChild(this.last(nodeName).get());
		}
		this.parent = function(level){
			let parent = this.get().parentNode;
			if(typeof level == 'number')
			while(level-->1){
				parent = parent.parentNode;
			}
			return new dom(parent);
		}
		//根据id或节点名称找到第一个匹配的子节点
		this.at = function(id){
			if(typeof id =='number')
				return new dom(this.element.children[id]);
			var cs = this.element.children;
			for(const c of cs)
			if(c.nodeName.toLowerCase()==id.toLowerCase())
				return new dom(c);
		}
		//根据id或节点名称找到所有匹配的子节点
	                this.nodesAt = function(id){
			if(typeof id =='number')
				return new dom(this.element.children[id]);
			let doms = new Array();
			var cs = this.element.children;
			for(const c of cs)
			if(c.nodeName.toLowerCase()==id.toLowerCase())
				doms.push(new dom(c));
			return doms;
		}
		this.replace = function(src,dest){
			this.get().replaceChild(src.get(),dest.get());
		}
		//返回下一个兄弟节点
		this.next = function(){
			return new dom(this.get().nextSibling);
		}
		this.pre = function(){
			return new dom(this.get().previousSibling);
		}
		this.first = function(id){
			return this.nodesAt(id)[0];
		}
		this.last = function(id){
			let nodes = this.nodesAt(id);
			return nodes[nodes.length-1];
		}
		this.value = function(){
			return this.get().value;
		}
		this.values = function(){
			let vs = new Array();
			let inputs = this.nodesAt('input');
			for(const i of inputs){
				let value = i.get().value;
				if(typeof value  != 'undefined')
				{
					vs.push(value);
				}
			}
			return vs;
		}
		this.copy = function(){
			var node = this.get().cloneNode();
			const copy = new dom(node);
			if(typeof this.getText()!= 'undefined');
				copy.setText(this.getText());
			return copy;
		}
	}
	//建立 body 的dom对象 
	const body = new dom();
	function init(){
		body.setText('点击标题行即可进行排序');
		body.set(document.getElementsByTagName('body')[0]);
		body.addAttribute('style','width:800px;text-align:center;padding:10px;margin-left:10px');
		let h1 = new dom('h1');
		h1.addAttribute('style','auto;color:skyblue');
		h1.setText('点击表格的标题处可以自动排序');
		body.add(h1)
		getButton();
		body.add(new dom('br'));
		body.add(new dom('br'));
		createInput();
		createTable();
	}
	function createInput(){
		//create label of item
		let id = new dom('span');
		id.addAttribute('style','margin:1 1 1 10');
		let name = id.copy();
		let hp = id.copy();
		let damage = id.copy();
		let email = id.copy();
		let username = id.copy();
		let password = id.copy();

		//create input  of item
		let txtId = new dom('input');
		txtId.addAttribute('style','width:50px');
		txtId.addAttribute('placeholder','请输入');
		txtId.addAttribute('onkeydown','return checkNum(this,event)');
		let txtName = txtId.copy();
		let txtHp = txtId.copy();
		let txtDamage = txtId.copy();
		let txtEmail = new dom('input');
		txtEmail.addAttribute('style','width:143px');
		txtEmail.addAttribute('placeholder','请输入邮箱');
		let txtUserName = txtId.copy();	
		let txtPassword = txtId.copy();	
		txtUserName.addAttribute('name','name')
		txtPassword.addAttribute('name','password')
		txtPassword.removeAttribute('onkeydown');
		txtPassword.addAttribute('type','password');

		//create button of item
		let btn = new dom('input');
		btn.addAttribute('value','插入数据');
		btn.addAttribute('type','submit');
		btn.addAttribute('style','margin:0 15');
		btn.addAttribute('onclick','insertIntoTable(this);');
		let submit = btn.copy();
		submit.get().value = '登录';
		submit.addAttribute('onclick','return checkLogin(this)')

		//create msgBox of item
		let msgBox = new dom('span');
		msgBox.addAttribute('style','display:none');
		msgBox.addAttribute('id','msg');
		
		//set text of label
		id.setText('id：');
		hp.setText('hp：');
		name.setText('name：');
		hp.setText('hp：');
		damage.setText('damage：');
		email.setText('邮箱：');
		username.setText('账号：');
		password.setText('密码：');		

		//set form
		let form = new dom('form');
		form.addAttribute('method','post');
		form.addAttribute('action','https://how2j.cn/study/login.jsp');
		form.addAttribute('style','margin:5px');
		form.addAttribute('onclick','');
		form.add(email,txtEmail,username,txtUserName,password,txtPassword,submit);

		//inset into parent node (div)
		let div = new dom('div');
		div.add(id,txtId,name,txtName,hp,txtHp,damage,txtDamage,btn,msgBox,form);
		body.add(div);
	}
	
	function createTable(){
		//建立 table 的 dom对象
		const table = new dom('table');
		//创建 table 的 style 属性
		table.addAttribute('style','width:100%;text-align:center;border-collapse:collapse;border-bottom:1px solid #bbb;margin:50 0 50 0;');
		//添加标题行
		table.add(getRowTitle());
		//添加其余行
		addRows(table);
		//向 table 添加 换行
		//table.add(new dom('br'));
		
		//向 body 添加 table
		body.add(table);
		
	}
	function setStyle(rows){
		for(const i in rows){
			let r = rows[i];
			if(i%2!=0)
			{
			       //let color = getRandColor();
			       r.addAttribute( 'style','background-color:#eee');
			}
			
		}
	}
	function addRows(sender){
		let gareen = new Hero('1','gareen',Math.round(Math.random()*500),'12');
		let teemo = new Hero('2','teemo',Math.round(Math.random()*500),'34');
		let annie = new Hero('3','annie',Math.round(Math.random()*500),'56');
		let deadbrother = new Hero('4','deadbrother',Math.round(Math.random()*500),'78');
		let rows = getRows(gareen,teemo,annie,deadbrother);
		setStyle(rows);
		for(let r of rows)
		sender.add(r);
	}
	function getRows(...hs){
		let rows = new Array();
		for(let hero of hs){
			let row = hero.trDOM();
			row.addAttribute('style','border-bottom:1px solid #eee');
			rows.push(row);
		}
		return rows;
	}
	//获取表格的标题行
	function getRowTitle()
	{
		let row = new dom('tr');
		row.addAttribute('style','border-bottom:3px solid #bbb;background-color:#fafafa');
		let cols = new Array(4);
		let strColor = getRandColor();
		cols[0] = getCol('id','width:25%;color:'+strColor+';cursor:pointer');
		cols[1] = getCol('名称','width:25%;color:'+strColor+';cursor:pointer');
		cols[2] = getCol('血量','width:25%;color:'+strColor+';cursor:pointer');
		cols[3] = getCol('伤害','width:25%;color:'+strColor+';cursor:pointer');
		setEvent(cols);
		for(let col of cols){
			row.add(col);
		}
		return row;
	}
	function setEvent(cols){
		for(let i in cols){
			let c = cols[i];
			c.addAttribute('onclick','sortTable('+i+',this)');
		}
	}
	function getCol(txt,css){
		let col = new dom('td');
		col.setText(txt);
		if(css!=null)
		col.addAttribute('style',css);
		return col;
	}

	function getButton(){
	    addButton('更新表格','onclick','clearTable();createTable()');
	    addButton('动态创建一个新表','onclick','createTable()');
	    addButton('按名称排序','onclick','sortTable(1)');
	    addButton('按id排序','onclick','sortTable(0)');
	    addButton('标题置顶/置底','onclick','reverseTable()');
	    addButton('删除表格','onclick','removeTable()');
	    addButton('清空表格','onclick','clearTable()');

	}
	function addButton(name,eventType,eventValue){
	    let btn = new dom('button');
	    btn.addAttribute(eventType,eventValue);
	    btn.addAttribute('style','margin:5px');
	    btn.setText(name);
	    body.add(btn);
	}
	function clearTable(){
	    body.clear('table');
	}
	function removeTable(){
	    if(typeof body.at('table') == 'undefined')return;
	    let res = confirm('是否确定删除最近的表格？');
	    if(res)
	    body.removeLast('table');
	}
	function getRandColor(){
		let ir = Math.random()*255;
		let ig = Math.random()*255;
		let ib = 255-ir;
		let r = Math.round(ir).toString(16);
		let g = Math.round(ig).toString(16);
		let b = Math.round(ib).toString(16);
		return '#'+r+g+b;
	}
	function getInvColor(strColor){
		strColor = strColor.replace('#');
		let r =  ( 255-parseInt(strColor.substring(0,2).toString(10)) ).toString(16);
		let g = ( 255-parseInt(strColor.substring(2,4).toString(10)) ).toString(16);
		let b = ( 255-parseInt(strColor.substring(4,6).toString(10)) ).toString(16);
		return '#'+r+g+b;
	}
	function checkTitle(first){
		return first.at('td').getText().trim().toLowerCase().charAt(0)==='i';
	}
	function sortTable(id,sender){
	    let table = body.at('table');
	    if(typeof sender != 'undefined'){
 	    if(sender.nodeName.toLowerCase()=='td')
	   	 table = new dom(sender.parentNode.parentNode)
	    else if(sender.nodeName.toLowerCase()=='tr')
	   	 table = new dom(sender.parentNode);
	    }
	    var rows = table.nodesAt('tr');
	    let title = undefined;
	    let isFirst = checkTitle(rows[0]);
	    if(isFirst)
	          title = rows.shift();
	    else
	          title = rows.pop();
	    var titleCol = title.nodesAt('td')[id];
	    var text = titleCol.getText();
	    var txtMain = text.replace('↓','').replace('↑','');
	    let isDescend = false;
	    for(let i in title.nodesAt('td')){
		if(i!=id)
		title.nodesAt('td')[i].setText(title.nodesAt('td')[i].getText().replace('↓','').replace('↑',''));
	    }
	    if(text.charAt(text.length-1)=='↑'){
		isDescend = true;
		titleCol.setText(txtMain+"↓");
	    }else 
		titleCol.setText(txtMain+"↑");
	   
	    rows.sort((r1,r2)=>{
		var c1 = r1.nodesAt('td')[id].getText().trim();
		var c2 = r2.nodesAt('td')[id].getText().trim();
		     let i1 = parseInt(c1);
		     let i2 = parseInt(c2);
		     if(Number.isNaN(i1)||Number.isNaN(i2)){
			let res = c1.localeCompare(c2);
		     	if(isDescend)
		     	res = c2.localeCompare(c1);
		     	return res;
		     }
		     res = i1-i2;
	                     if(isDescend)res*=-1;
		     return res;
		
	    });
	    table.clear('tr');
	    if(isFirst)
	    table.add(title);
	    for(const r of rows)
		table.add(r);
	    if(!isFirst)
	    table.add(title);
	}
	function reverseTable(){
	    let table = body.at('table');
	    var firstRow = table.first('tr');
	    var lastRow = table.last('tr');
	    table.replace(lastRow,firstRow);
	    table.add(firstRow);
	}
	function insertIntoTable(sender){
		sender = new dom(sender);
		let table = body.at('table');
		let parent = sender.parent();
		if(!checkInput(parent))return;
		let values = parent.values();
		let hero = new Hero(values[0],values[1],values[2],values[3]);
		let row = hero.trDOM();
		if(table.count()%2==0)
			row.addAttribute( 'style','background-color:#eee');
		table.add(row);
	}
	function checkInput(parent){
		let is = parent.nodesAt('input');
		let msg = new dom(document.getElementById('msg'));
		for(const input of is){
			if(!input.value()||input.value().trim()==="")
			{
				msg.get().style.color = "red";
				msg.get().style.display = "inline";
				msg.setText(input.pre().getText()+'输入为空！');
				return false;
			}
		}
		msg.get().style.color = "lightgreen";
		msg.get().style.display = "inline";
		msg.setText('数据合理');
		return true;
		
	}
	function checkNum(sender,e){
		if(e.key === 'Backspace')return true;
		let txt = new dom(sender);
		let lal = txt.pre().getText();
		if(lal=='name：')return true;
		let msg = new dom(document.getElementById('msg'));
		if(parseInt(e.key)!=e.key||txt.value()&&parseInt(txt.value())!=txt.value())
		{
			msg.get().style.color = "red";
			msg.get().style.display = "inline";
			msg.setText(lal +'请输入整数');
			return false;
		}		
		msg.get().style.display = "none";
		return true;
	}
	function checkLogin(sender){
		let parent = new dom(sender).parent();
		let is = parent.nodesAt('input');
		is.pop();//移除按钮input
		for(const input of is){
			let value = input.value();
			let lal = input.pre().getText();
			if(!value||value.trim()==="")
			{	
				alert(lal+'输入为空');
				return false;
			}
			if(lal =='账号：'||lal=='邮箱：'){
				if(value.length<3)
				{
					alert(lal+'最少为三位数');
					return false;
				}
			}
			if(lal =='邮箱：'){
				let reg = /.*@.*\.com$/;
				if(!reg.test(value))
				{
					alert(lal+'邮箱格式不正确');
					return false;
				}
			}
		}
		return true;
	}
         </script>
    </head>

    <body onload="init();">
    </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2023-09-11 练习-表格排序

旧时亭台阁

关于前端部分-HTML DOM-表格排序的提问

talk is cheap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        table tr:first-child {
            color: deepskyblue;
            cursor: pointer;
        }
        table tr {
            line-height: 30px;
            border-bottom: 1px solid darkgrey;
        }
        table tr:nth-child(even) {
            background-color: gainsboro;
        }
        table td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td onclick="sort(this);">id</td>
            <td onclick="sort(this);">名称</td>
            <td onclick="sort(this);">血量</td>
            <td onclick="sort(this);">伤害</td>
        </tr>

        <tr>
            <td>1</td>
            <td>gareen</td>
            <td>340</td>
            <td>58</td>
        </tr>
        <tr>
            <td>2</td>
            <td>teemo</td>
            <td>320</td>
            <td>76</td>
        </tr>
        <tr>
            <td>3</td>
            <td>annie</td>
            <td>380</td>
            <td>38</td>
        </tr>
        <tr>
            <td>4</td>
            <td>deadbrother</td>
            <td>400</td>
            <td>90</td>
        </tr>
    </table>
</body>
<script>
    function sort(td) {
        var firstRow = td.parentNode;

        // 解析是第几列
        var colIndex = -1;
        for (let i = 0; i < firstRow.children.length; i++) {
            if (firstRow.children[i] === td) {
                colIndex = i;
                break;
            }
        }

        var parent = firstRow.parentNode;

        // 做个备份，保留所有行数据
        var bakAllRow = [...parent.children];
        // 清空表格
        // 不能直接用 children 属性遍历，移除子节点后，children 属性会变化的，所以需要作备份
        for (let row of bakAllRow) {
            parent.removeChild(row);
        }

        // 排序
        var otherRows = bakAllRow.filter(o => o !== firstRow);
        otherRows.sort((a, b) => {
            // 提取相应单元格的内容
           var wa = a.children[colIndex].innerHTML;
           var wb = b.children[colIndex].innerHTML;
           // TODO: 进行比较
           return wa.localeCompare(wb);
        });

        // 重新给表格添加行数据
        parent.appendChild(firstRow);
        for (let row of otherRows) {
            parent.appendChild(row);
        }
    }
</script>
</html>

1 个答案

CharlieLong
答案时间：2023-11-09

所有习题答案

代码超过 5行，点击查看

<!--练习1：删除行为前的提示-->
<!--练习2：登录时验证账号密码是否为空-->
<!--练习3：提交数据验证长度-->
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<!--练习7：隐藏和显示-->
<!--练习8：表格排序-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>DOM常见常见场景</title>
</head>
<body id="body">
<!--练习1：删除行为前的提示-->
<!--练习8：表格排序-->
<h3>练习1：删除行为前的提示</h3>
<h3>练习8：表格排序</h3>
<table id="Heroes" ></table>
<!--练习2：登录时验证账号密码是否为空-->
<h3>练习2：登录时验证账号密码是否为空</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user">
    </div>
    <div>
        密码：<input type="text" id="passwd">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习3：提交数据验证长度-->
<h3>练习3：提交数据验证长度</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user1">
    </div>
    <div>
        密码：<input type="text" id="passwd1">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<h3>练习4：验证年龄是否为数字</h3>
<h3>练习5：验证年龄是否为整数</h3>
<h3>练习6：验证email格式是否正确</h3>
<div>
    账号：<input type="text" id="user3">
</div>
<div>
    年龄：<input type="text" id="inputCheck" onkeyup="checkisInt()"><span id="returnisInt"></span>
</div>
<div>
    E-mail：<input type="text" id="inputCheck_email" onkeyup="checkisEmail()"><span id="returnisEmail"></span>
</div>
<div>
    <button onclick="checkisPass()">注册</button>
</div>

<!--练习7：隐藏和显示-->
<h3>练习7：隐藏和显示</h3>
<button onclick="showDiv()">显示DIV</button>
<button onclick="hideDiv()">隐藏DIV</button>
<div id="divtest">这是一个DIV</div>
<!--练习8：表格排序-->
<h3>练习8：表格排序</h3>
<script>
    // <!--练习1：删除行为前的提示-->
    //初始化列和内容信息
    let heroesArrayCol=["id","名称","血量","伤害"];
    let heroesArrayVal=[[1,"garren","340","58"],
        [2,"teemo","320","76"],
        [3,"annie","380","38"],
        [4,"deadbrother","400","90"]];
    let tbHeroes=document.getElementById("Heroes");
    //表格首行信息
    let tbrowFirst=document.createElement("tr");
    tbrowFirst.id="firstRow";
    for(let i=0;i<heroesArrayCol.length;i++){
        let td=document.createElement("td");
        td.id="col"+i;
        let a=document.createElement("a");
        a.href="#";
        a.id=i;
        a.setAttribute("onclick","sort("+i+")")
        let aText=document.createTextNode(heroesArrayCol[i]);
        a.appendChild(aText);
        td.appendChild(a);
        td.setAttribute("width","20%");
        tbrowFirst.appendChild(td);
    }
    //加入操作列
    let td=document.createElement("td");
    td.appendChild(document.createTextNode("操作"));
    td.setAttribute("width","20%");
    tbrowFirst.appendChild(td);
    tbHeroes.appendChild(tbrowFirst);

    //表格中添加数据行信息
    appendRow();
    function appendRow(){
        let tbody=document.createElement("tbody");
        tbody.id="tbody";
        tbHeroes.appendChild(tbody);

        let tbrowVal=new Array(heroesArrayVal.length);
        for(let i=0;i<heroesArrayVal.length;i++){
            tbrowVal[i]=document.createElement("tr");
            tbrowVal[i].id=i;
            tbody.appendChild(tbrowVal[i]);
            for(let j=0;j<heroesArrayVal[i].length;j++){
                let td=document.createElement("td");
                let tdText=document.createTextNode(heroesArrayVal[i][j]);
                td.appendChild(tdText);
                tbrowVal[i].appendChild(td);
            }
            //加入操作列按钮
            let td=document.createElement("td");
            let a=document.createElement("a");
            let aText=document.createTextNode("删除");
            a.href="#";
            a.appendChild(aText);
            a.setAttribute("onclick","delRow(this)")
            td.appendChild(a);
            tbrowVal[i].appendChild(td);
            if(i%2===0){
                tbrowVal[i].className="oddRow"
            }else{
                tbrowVal[i].className="evenRow"
            }
        }
        //调整样式
        tbHeroes.style.width="60%";
        tbHeroes.style.borderCollapse="collapse"
        let firstRow=document.getElementById("firstRow");
        let oddRow=document.getElementsByClassName("oddRow");
        let evenRow=document.getElementsByClassName("evenRow");
        firstRow.style.backgroundColor="write";
        firstRow.style.borderBottomColor="4E4E4E";
        firstRow.style.borderBottomStyle="double";

        for(let i=0;i<oddRow.length;i++){
            oddRow[i].style.backgroundColor="rgb(248,248,248)";
            oddRow[i].style.borderBottomColor="#C0BEBE";
            oddRow[i].style.borderBottomStyle="solid";
        }
        for(let i=0;i<evenRow.length;i++){
            evenRow[i].style.backgroundColor="rgb(255,255,255)";
            evenRow[i].style.borderBottomColor="#C0BEBE";
            evenRow[i].style.borderBottomStyle="solid";
        }
    }
    //执行删除操作
    function delRow(toBeDel){
        let trNum=toBeDel.parentNode.parentNode;
        let tbody=document.getElementById("tbody");
        tbody.removeChild(trNum);
        //删除数组中的元素
        let id=trNum.childNodes[0].textContent;
        for(let i=0;i<heroesArrayVal.length;i++){
            if(heroesArrayVal[i][0]===Number(id)){
                heroesArrayVal.splice(i,1);
                console.log(heroesArrayVal);
            }
        }
    }
    //执行列排序
    let col = 0;
    let reverse = false;
    //答案中的排序会造成背景色一起发生变化，因此对答案进行了改进
    // function sort(column){
    //     if(column === col)
    //         reverse = !reverse;
    //     col = column;
    //     var tbody = document.getElementById("tbody");
    //     //通过getElementsByTagName取出来是一个Collection
    //     var trsCollection =  document.getElementsByTagName("tr");
    //     //因为Collection没有自带的排序函数，所以需要转换为数组，利用数组自带的排序
    //     var trs =[];
    //     for (var i=1; i <trsCollection.length; i++) {
    //         trs.push(trsCollection[i]);
    //     }
    //     trs.sort(comparator);
    //     for (var i=0; i <trs.length; i++) {
    //         tbody.appendChild(trs[i]);
    //     }
    // }
    // function comparator(tr1,tr2){
    //     var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容
    //     var td2 = tr2.children[col].innerHTML;
    //     if(!reverse)
    //         return td1.localeCompare(td2);
    //     else
    //         return td2.localeCompare(td1);
    // }
    function sort(column){
        if(column===col)
            reverse=!reverse;
        col=column;
        heroesArrayVal.sort(comparator);
        let tbody=document.getElementById("tbody");
        tbody.remove();
        appendRow();
    }
    function comparator(val1,val2){
        let td1=String(val1[col]);
        let td2=String(val2[col]);
        if(!reverse)
            return td1.localeCompare(td2);
        else
            return td2.localeCompare(td1);
    }

    // <!--练习2：登录时验证账号密码是否为空-->
    function login(){
        let user=document.getElementById("user").value;
        let passwd=document.getElementById("passwd").value;
        if(user===""||passwd===""){
            alert("用户名或密码不能为空")
            return false
        }else if(user.length<3){
            alert("用户名长度不能小于3位")
            return false
        }
        return true
    }
    //<!--练习4：验证年龄是否为数字-->
    let isPassCheck=false;
    function checkisInt(){
        let input=Number(document.getElementById("inputCheck").value);
        let returnisInt=document.getElementById("returnisInt")
        if(Number.isInteger(input)&&input!==0){
            returnisInt.textContent="";
            isPassCheck=true;
        }else if(!Number.isInteger(input)){
            returnisInt.textContent="请录入整数!";
            isPassCheck=false;
        }else if(input===0){
            returnisInt.textContent="请输入正确的年龄";
            isPassCheck=false;
        }
    }
    function checkisPass(){
        if(isPassCheck===false){
            alert("校验不通过，请修改后再提交！");
        }else{
            alert("注册成功！");
        }
    }
    function checkisEmail(){
        let input=document.getElementById("inputCheck_email").value;
        let returnisEmail=document.getElementById("returnisEmail")
        var Regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(Regex.test(input)){
            returnisEmail.textContent="";
            isPassCheck=true;
        }else if(!Regex.test(input)){
            returnisEmail.textContent="邮箱格式不正确!";
            isPassCheck=false;
        }else if(input===""){
            returnisEmail.textContent="邮箱不能为空";
            isPassCheck=false;
        }
    }

    <!--练习7：隐藏和显示-->
    function showDiv(){
        let div=document.getElementById("divtest");
        div.style.display="block";
    }
    function hideDiv(){
        let div=document.getElementById("divtest");
        div.style.display="none";
    }

</script>
</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-11-22 数组转换里面下标为什么从1开始而不是从0开始呢？

2021-03-30 答案

镜子里的笑脸

关于前端部分-HTML DOM-表格排序 -答案-表格排序的提问

一个函数全部搞定，最主要的难题就是在比较大小后，怎么交换位置。一开始用替换函数replacechild(a,b)总是出错，原因是a替换b的时候，会把b删掉，然后出现各种问题。后面换成了插入函数insertbefore（a,b），问题就解决了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格排序</title>
    <style>
        table{
            width:800px;
            text-align: center;
            margin: auto;
            border-collapse: collapse;
        }
        td{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: #f5f5f5;
            padding: 10px 0px;
        }
        th{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: lightgray;
            padding: 10px 0px;
        }
        a{
            text-decoration: none;
            color:lightskyblue;
        }
    </style>
</head>
<body>
<table id="ta">
    <tr>
        <th><a href="#" onclick="f(0)">id</a></td>
        <th><a href="#" onclick="f(1)">名称</a></td>
        <th><a href="#" onclick="f(2)">血量</a></td>
        <th><a href="#" onclick="f(3)">伤害</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>gareen</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr>
        <td>2</td>
        <td>teemo</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr>
        <td>3</td>
        <td>annie</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr>
        <td>4</td>
        <td>deadbrother</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>
<script>
   function f(n)                                      //n为第几列进行比较
   {
       var tb=document.getElementById("ta").lastChild;//table下面的子节点tbody
       var tr=tb.children,i,j,k=0;                    //tr为tb的子节点
       for(i=1;i<5;i++) {
           for (j = i + 1; j < 5; j++) {
               if (tr[i].children[n].innerHTML> tr[j].children[n].innerHTML) { //比较tr[i]与tr[j]的值的大小
                   tb.insertBefore(tr[j], tr[i]);          //交换tr[i]与tr[j]的位置,先把tr[i]插到tr[j]
                   tb.insertBefore(tr[i + 1], tr[j + 1]);  //然后tr[i]变成了t[i+1],把t[i+1]放到tr[j+1]前
                   k=k+1;                                  //k计算有没有进行过交换
               }
           }
       }
       if(k==0){                                           //没有进行过交换，则所有顺序颠倒
           tb.insertBefore(tr[4], tr[1]);
           tb.insertBefore(tr[4], tr[2]);
           tb.insertBefore(tr[4], tr[3]);
       }
   }
</script>
</body>
</html>

2 个答案

ljjljj
答案时间：2021-04-19

为什么tb那里要用lastchild

镜子里的笑脸
答案时间：2021-03-30

var temp = trs[x].innerHTML; trs[x].innerHTML = trs[y].innerHTML； trs[y].innerHTML = temp; 看其他人的代码，发现一种更简单的方法，我一开始直接交换tr，发现不行，竟然没有想到交换tr.innerHTML

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 31 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-表格排序的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图