系统会在tbody中随机生成一份产品信息表单,如html所示。
请完成 sort 函数,根据参数的要求对表单所有行进行重新排序。
1、type为id、price或者sales,分别对应第1 ~ 3列
2、order为asc或者desc,asc表示升序,desc为降序
3、例如 sort('price', 'asc') 表示按照price列从低到高排序
4、所有表格内容均为数字,每一列数字均不会重复
5、不要使用第三方插件
这种题目给个函数怎么写啊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table> <thead> <tr><th>id</th><th>price</th><th>sales</th></tr> </thead> <tbody id="jsList"> <tr><td>1</td><td>10.0</td><td>800</td></tr> <tr><td>2</td><td>30.0</td><td>600</td></tr> <tr><td>3</td><td>20.5</td><td>700</td></tr> <tr><td>4</td><td>40.5</td><td>500</td></tr> <tr><td>5</td><td>60.5</td><td>300</td></tr> <tr><td>6</td><td>50.0</td><td>400</td></tr> <tr><td>7</td><td>70.0</td><td>200</td></tr> <tr><td>8</td><td>80.5</td><td>100</td></tr> </tbody> </table> </body> </html> <script> let list = document.getElementById('jsList') let arr = list.innerText.split('\n') arr = arr.map(item => { return item.replace(/\s+/g, ' ') }) /* [ 0: "1 10.0 800" 1: "2 30.0 600" 2: "3 20.5 700" 3: "4 40.5 500" 4: "5 60.5 300" 5: "6 50.0 400" 6: "7 70.0 200" 7: "8 80.5 100" ] */ const objArr = [] arr.forEach(item => { let propArr = item.split(' ') objArr.push({ id: propArr[0], price: propArr[1], sales: propArr[2] }) }) // 转换为 /* 0: {id: "1", price: "10.0", sales: "800"} 1: {id: "3", price: "20.5", sales: "700"} 2: {id: "2", price: "30.0", sales: "600"} 3: {id: "4", price: "40.5", sales: "500"} 4: {id: "6", price: "50.0", sales: "400"} 5: {id: "5", price: "60.5", sales: "300"} 6: {id: "7", price: "70.0", sales: "200"} 7: {id: "8", price: "80.5", sales: "100"} */ // sort // 按什么属性排序,asc / desc 升序/降序 function sort (arr, prop, sortFunc) { arr.sort((obj1, obj2) => { if (sortFunc === 'asc') { // 升序 if (obj1[prop] < obj2[prop]) { // 如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0, // 如果第一个参数应该位于第二个之后则返回一个正数 return -1 } else if (obj1[prop] > obj2[prop]) { return 1 } else { return 0 } } else if (sortFunc === 'desc') { if (obj1[prop] > obj2[prop]) { return -1 } else if (obj1[prop] < obj2[prop]) { return 1 } else { return 0 } } }) } sort(objArr, 'sales', 'desc') console.log(objArr) // insert dom /* <tbody id="jsList"> <tr><td>1</td><td>10.0</td><td>800</td></tr> <tr><td>2</td><td>30.0</td><td>600</td></tr> <tr><td>3</td><td>20.5</td><td>700</td></tr> <tr><td>4</td><td>40.5</td><td>500</td></tr> <tr><td>5</td><td>60.5</td><td>300</td></tr> <tr><td>6</td><td>50.0</td><td>400</td></tr> <tr><td>7</td><td>70.0</td><td>200</td></tr> <tr><td>8</td><td>80.5</td><td>100</td></tr> </tbody> */ let fragment = document.createDocumentFragment() objArr.forEach(item => { let tr = document.createElement('tr') let td1 = document.createElement('td') td1.innerHTML = item.id let td2 = document.createElement('td') td2.innerHTML = item.price let td3 = document.createElement('td') td3.innerHTML = item.sales tr.appendChild(td1) tr.appendChild(td2) tr.appendChild(td3) fragment.appendChild(tr) }) list.innerHTML = '' list.appendChild(fragment) </script>
function sort(type, order) { const tbody = document.getElementById("jsList") const children = [...tbody.children] const colMap = { id: 0, price: 1, sales: 2 } children.sort((a, b) => { const aField = +a.children[colMap[type]].innerText const bField = +b.children[colMap[type]].innerText return order === 'asc' ? aField - bField : bField - aField }) children.forEach(item => tbody.append(item)) }
function sort(type, order) { var map = ['id','price','sales'], parent = document.getElementById('jsList'), trs = parent.children, col = map.indexOf(type); [].slice.call(trs).sort(function(l,n){ var lt = l.children[col].innerHTML, nt = n.children[col].innerHTML; return order == 'desc' ? lt < nt : lt > nt; }).map(function(el){ parent.appendChild(el); }); }
function sort(type, order) { var list = document.getElementById('jsList'); var trs = list.getElementsByTagName('tr'); var trsArr = [].slice.call(trs); var swObj = { id: 0, price: 1, sales: 2, }; trsArr .sort(function (a, b) { var aVal = parseFloat(a.children[swObj[type]].innerHTML); var bVal = parseFloat(b.children[swObj[type]].innerHTML); return order === 'asc' ? aVal - bVal : bVal - aVal; }) .forEach(function (tr) { list.appendChild(tr); }); }
折腾了许久,发现最后这个题目要通过,需要注意的事项:
function sort(type, order) { let bodyList = document.getElementById('jsList') let resultData = [] for (let i = 0; i < bodyList.childNodes.length; i++) resultData.push({ id: bodyList.childNodes.item(i).childNodes[0].textContent, price: bodyList.childNodes.item(i).childNodes[1].textContent, sales: bodyList.childNodes.item(i).childNodes[2].textContent, tr: bodyList.childNodes.item(i) }) resultData .sort((min, max) => order === 'asc' ? min[type] - max[type] : max[type] - min[type]) .forEach(item => bodyList.appendChild(item.tr)) }
function sort(type, order) { const tb = document.getElementsByTagName('tbody')[0]; const arr = [].slice.call(tb.children); arr.sort((a, b) => { let mapA = {}, mapB = {}; [mapA['id'], mapA['price'], mapA['sales']] = [].slice.call(a.children).map(item => item.innerText); [mapB['id'], mapB['price'], mapB['sales']] = [].slice.call(b.children).map(item => item.innerText); return order === 'asc' ? mapA[type] - mapB[type] : mapB[type] - mapA[type] }); tb.replaceChildren(...arr); }
function sort(type, order) { let tbody_el = document.querySelector('tbody'); let tbody_trs = [].slice.call(document.querySelectorAll('tbody>tr')); let index = type === 'id' ? 0 : type === 'index' ? 1 : 2; let table_mes = [] tbody_trs.forEach(t => { console.log(t.children[0].innerText) table_mes.push({ id: t.children[0].innerText, price: t.children[1].innerHTML, sales: t.children[2].innerHTML }) }) console.log(table_mes, '@@@@') table_mes.sort((a, b) => { if (order === 'asc') { return a[type] - b[type] } else { return b[type] - a[type] } }) console.log(table_mes) tbody_el.innerHTML = table_mes.reduce((v, t, i) => { return v += `<tr><td>${t.id}</td><td>${t.price}</td><td>${t.sales}</td></tr>` }, '') }
function sort(type, order) { //type为id、price或者sales; asc表示升序,desc为降序 // 1.获取父节点 var tbody = document.getElementById('jsList') // 2.获取数据--多少行数据 var len = tbody.children.length // 3.遍历获取数组 var domArr = [] var typeNum = type == 'id' ? 0 : type == 'price' ? 1 : type == 'sales' ? 2 : '' for (let i = 0; i < len; i++) { domArr.push(tbody.children[i]) } // 4.重新排列--js sort() domArr.sort((a, b) => { return order==='desc' ? (b.children[typeNum].innerHTML - a.children[typeNum].innerHTML) : (a.children[typeNum].innerHTML - b.children[typeNum].innerHTML) }) // 5.更新节点 domArr.forEach(item => { tbody.appendChild(item); }) }
function sort(type, order) { let tr = Array.from(document.querySelector('tbody').children) tr.sort((a, b) => { switch (order) { case 'asc': switch (type) { case 'id': return a.children[0].innerHTML - b.children[0].innerHTML case 'price': return a.children[1].innerHTML - b.children[1].innerHTML case 'sales': return a.children[2].innerHTML - b.children[2].innerHTML } case 'desc': switch (type) { case 'id': return b.children[0].innerHTML - a.children[0].innerHTML case 'price': return b.children[1].innerHTML - a.children[1].innerHTML case 'sales': return b.children[2].innerHTML - a.children[2].innerHTML } } }).forEach(value => { document.querySelector('tbody').appendChild(value) }) }
function sort(type, order) { let tbody=document.getElementById("jsList") let trArr=tbody.getElementsByTagName("tr") let arr=[...trArr] // arr.prototype let pos= (type=="id"?0:type=="price"?1:type=="sales"?2:0) arr.sort(function(a,b){ let f1= parseFloat( a.cells[pos].innerText ) let f2= parseFloat( b.cells[pos].innerText ) if(order=="desc") { return f2-f1 } return f1-f2 }) tbody.innerHTML="" arr.forEach((ele)=>{ tbody.appendChild(ele) })
function sort(type, order) { let arr = []; // 获取所有的tr节点 let allTrNodes = document.querySelectorAll("#jsList tr"); // 以对象的形式存在arr里 Array.from(allTrNodes).map((item) => arr.push({ id: +item.querySelectorAll("td")[0].innerText, price: +item.querySelectorAll("td")[1].innerText, sales: +item.querySelectorAll("td")[2].innerText, }) ); // 排序函数 arr:对象的数组,order:排序方式(asc,desc),key:排序依据(id,price,sales) function sortArr(arr, order, key) { if (order === "asc") return arr.sort((a, b) => a[key] - b[key]); return arr.sort((a, b) => b[key] - a[key]); } arr = sortArr(arr, order, type); if (arr.length) { // 清空原节点 allTrNodes.forEach((item) => document.querySelector("#jsList").removeChild(item) ); // 产生新的节点 for (const key in arr) { const tr = document.createElement("tr"); tr.innerHTML = `<tr><td>${arr[key].id}</td><td>${arr[key].price}</td><td>${arr[key].sales}</td></tr>`; document.querySelector("tbody").appendChild(tr); } } } 实现了但通过不了
function sort(type, order) { var list = document.getElementById('jsList') var typeObj = { id: 0, price: 1, sales: 2 } Array.from(list.children) .sort((a, b) => { return ( (a.children[typeObj[type]].innerHTML - b.children[typeObj[type]].innerHTML) * (order == 'asc' ? 1 : -1) ) }) .forEach(function (tr) { list.appendChild(tr) }) }
//抄的,写点注释,生活不易菜狗叹气 function sort(type, order) { //获取到type的索引值 let col = ['id','price','sales'].findIndex(item => item === type) //把HTMLCollection对象变为数组,比较关键,[].slice.call应该也可以 let trs =Array.from(document.getElementById("jsList").children); //调用数组的sort trs.sort((a, b) => { //用前面获取的type的索引值访问相应的值 let v1 = parseFloat(a.children[col].innerHTML); let v2 = parseFloat(b.children[col].innerHTML); //排序 return order === "asc" ? v1 - v2 : v2 - v1; }); //获取节点 let tbody = document.getElementById("jsList"); //回填节点更新页面 tbody.innerHTML = ""; trs.forEach(tr => { tbody.appendChild(tr); }); }
function sort(type, order) { let listIndex = ['id','price','sales'].indexOf(type), listEl = document.querySelectorAll('#jsList tr'), jsList = document.querySelector('#jsList') // 将NodeList结构转化成数组,方便后续的操作 let arr = Array.from(listEl) // 使用sort进行排序 arr.sort((a,b)=>{ return order === 'asc' ? a.childNodes[listIndex].innerText - b.childNodes[listIndex].innerText : b.childNodes[listIndex].innerText - a.childNodes[listIndex].innerText }) // 清空表格原来的数据 jsList.innerHTML = '' // 重新循环添加排序之后的数据 arr.forEach(item=>{ jsList.appendChild(item) }) }
for(let child of all.children){ var obj={} obj.id=child.firstChild.innerText obj.price=parseFloat(child.children[1].innerText).toFixed(1) obj.sales=parseInt(child.lastChild.innerText) objArr.push(obj) } objArr=objArr.sort(function(a,b){ if(order=='asc') return a[type]-b[type] else{ return b[type]-a[type] } }) let newText='' for(let item of objArr){ newText+='<tr><td>'+item.id+'</td><td>'+item.price+'</td><td>'+item.sales+'</td></tr>' } all.innerHTML=newText } sort('slaes','asc')