BD6. 表格排序
描述
系统会在tbody中随机生成一份产品信息表单，如html所示。HTML/CSS/JavaScript 解法, 执行用时: 886ms, 内存消耗: 77860KB, 提交时间: 2020-11-23
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function sort(type,order){\n var oJsList = document.getElementById(\"jsList\");\n var aTr = oJsList.getElementsByTagName(\"tr\");\n var len = aTr.length;\n var col;\n switch(type) {\n case 'id':\n col = 0;\n break;\n case 'price':\n col = 1;\n break;\n case 'sales':\n col = 2;\n break;\n }\n aTr = Array.prototype.slice.call(aTr);\n aTr.sort(function (val1,val2) {\n var v1 = parseFloat(val1.getElementsByTagName(\"td\")[col].innerText);\n var v2 = parseFloat(val2.getElementsByTagName(\"td\")[col].innerText);\n console.log(v1,v2);\n if (order == \"asc\") {\n return v1 - v2;\n } else {\n return v2 - v1;\n }\n });\n for (var i = 0; i < len; i++) {\n oJsList.appendChild(aTr[i]);\n }\n }","html":"<table>\n <thead>\n <tr><th>id</th><th>price</th><th>sales</th></tr>\n </thead>\n <tbody id=\"jsList\">\n <tr><td>1</td><td>10.0</td><td>800</td></tr>\n <tr><td>2</td><td>30.0</td><td>600</td></tr>\n <tr><td>3</td><td>20.5</td><td>700</td></tr>\n <tr><td>4</td><td>40.5</td><td>500</td></tr>\n <tr><td>5</td><td>60.5</td><td>300</td></tr>\n <tr><td>6</td><td>50.0</td><td>400</td></tr>\n <tr><td>7</td><td>70.0</td><td>200</td></tr>\n <tr><td>8</td><td>80.5</td><td>100</td></tr>\n </tbody>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 901ms, 内存消耗: 77904KB, 提交时间: 2020-12-23
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function sort(type, order) {\n var index = 0;\n var arr = [];\n if(type == \"id\"){\n index = 0;\n }else if(type == \"price\"){\n index = 1;\n }else if(type == \"sales\"){\n index = 2;\n }\n var jsList = document.getElementById(\"jsList\");\n var trs = jsList.getElementsByTagName('tr');\n var arrTrs = Array.prototype.slice.call(trs);\n arrTrs.sort(function(value1,value2){\n var td1 = value1.getElementsByTagName('td')[index].innerHTML;\n var td2 = value2.getElementsByTagName('td')[index].innerHTML;\n if(order == \"asc\"){\n return td1-td2;\n }\n if(order == \"desc\"){\n return td2-td1;\n }\n });\n for(var i = 0; i < arrTrs.length; i++){\n jsList.appendChild(arrTrs[i]);\n }\n}","html":"<table>\n <thead>\n <tr><th>id</th><th>price</th><th>sales</th></tr>\n </thead>\n <tbody id=\"jsList\">\n <tr><td>1</td><td>10.0</td><td>800</td></tr>\n <tr><td>2</td><td>30.0</td><td>600</td></tr>\n <tr><td>3</td><td>20.5</td><td>700</td></tr>\n <tr><td>4</td><td>40.5</td><td>500</td></tr>\n <tr><td>5</td><td>60.5</td><td>300</td></tr>\n <tr><td>6</td><td>50.0</td><td>400</td></tr>\n <tr><td>7</td><td>70.0</td><td>200</td></tr>\n <tr><td>8</td><td>80.5</td><td>100</td></tr>\n </tbody>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 956ms, 内存消耗: 77896KB, 提交时间: 2021-06-22
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":" function sort(type, order) {\n let tbody = document.getElementById('jsList');\n let list = tbody.getElementsByTagName('tr');\n\n let num = type == 'id' ? 0 : (type == 'price' ? 1 : 2);\n\n Array.prototype.slice.call(list).sort((a, b) => {\n a = a.getElementsByTagName('td')[num].innerHTML;\n b = b.getElementsByTagName('td')[num].innerHTML;\n return order == 'asc' ? (a - b) : (b - a);\n }).forEach(v => tbody.appendChild(v))\n }","html":"<table>\n <thead>\n <tr><th>id</th><th>price</th><th>sales</th></tr>\n </thead>\n <tbody id=\"jsList\">\n <tr><td>1</td><td>10.0</td><td>800</td></tr>\n <tr><td>2</td><td>30.0</td><td>600</td></tr>\n <tr><td>3</td><td>20.5</td><td>700</td></tr>\n <tr><td>4</td><td>40.5</td><td>500</td></tr>\n <tr><td>5</td><td>60.5</td><td>300</td></tr>\n <tr><td>6</td><td>50.0</td><td>400</td></tr>\n <tr><td>7</td><td>70.0</td><td>200</td></tr>\n <tr><td>8</td><td>80.5</td><td>100</td></tr>\n </tbody>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 969ms, 内存消耗: 77872KB, 提交时间: 2021-07-12
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function sort(type, order) {\n var list = document.getElementById(\"jsList\")\n var trs = list.getElementsByTagName(\"tr\")\n var col\n switch (type){\n case 'id':\n col = 0\n break;\n case 'price':\n col = 1\n break;\n case 'sales':\n col = 2\n break;\n }\n trs = Array.prototype.slice.call(trs)\n trs.sort(function(tr1,tr2){\n var val1 = parseFloat(tr1.getElementsByTagName(\"td\")[col].innerHTML)\n var val2 = parseFloat(tr2.getElementsByTagName(\"td\")[col].innerHTML)\n if(order == 'asc') {\n return val1 - val2\n } else {\n return val2 - val1\n }\n })\n for(var i=0;i<trs.length;i++){\n list.appendChild(trs[i])\n }\n}","html":"<table>\n <thead>\n <tr><th>id</th><th>price</th><th>sales</th></tr>\n </thead>\n <tbody id=\"jsList\">\n <tr><td>1</td><td>10.0</td><td>800</td></tr>\n <tr><td>2</td><td>30.0</td><td>600</td></tr>\n <tr><td>3</td><td>20.5</td><td>700</td></tr>\n <tr><td>4</td><td>40.5</td><td>500</td></tr>\n <tr><td>5</td><td>60.5</td><td>300</td></tr>\n <tr><td>6</td><td>50.0</td><td>400</td></tr>\n <tr><td>7</td><td>70.0</td><td>200</td></tr>\n <tr><td>8</td><td>80.5</td><td>100</td></tr>\n </tbody>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 970ms, 内存消耗: 82088KB, 提交时间: 2021-07-07
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":" function sort(type, order) {\n let thListIndex = -1\n let thList = document.querySelectorAll('thead tr th')\n let trList = document.querySelectorAll('tbody tr')\n let tbody = document.getElementById('jsList')\n for (let i = 0; i < thList.length; i++) {\n if(type === thList[i].innerText) {\n thListIndex = i\n }\n }\n // var arrTrs = Array.prototype.slice.call(trList);\n var arrTrs = Array.from(trList);\n console.log('arrTrs', trList , arrTrs)\n arrTrs.sort((a,b) => {\n let td1 = a.children[thListIndex].innerText\n let td2 = b.children[thListIndex].innerText\n if (order == \"asc\") {\n return td1 - td2;\n }\n if (order == \"desc\") {\n return td2 - td1;\n }\n })\n for (let index = 0; index < arrTrs.length; index++) {\n tbody.appendChild(arrTrs[index])\n }}","html":"<table>\n <thead>\n <tr><th>id</th><th>price</th><th>sales</th></tr>\n </thead>\n <tbody id=\"jsList\">\n <tr><td>1</td><td>10.0</td><td>800</td></tr>\n <tr><td>2</td><td>30.0</td><td>600</td></tr>\n <tr><td>3</td><td>20.5</td><td>700</td></tr>\n <tr><td>4</td><td>40.5</td><td>500</td></tr>\n <tr><td>5</td><td>60.5</td><td>300</td></tr>\n <tr><td>6</td><td>50.0</td><td>400</td></tr>\n <tr><td>7</td><td>70.0</td><td>200</td></tr>\n <tr><td>8</td><td>80.5</td><td>100</td></tr>\n </tbody>\n</table>","libs":[]}