2018百度春招前端笔试编程题,熟悉下table, 应该是很容易做出来的。
题目:
JS代码:
var table = document.getElementById("tb");
var table_th = document.getElementsByTagName("th");
var table_tbody = document.getElementById("jsList");
var table_tr = table_tbody.getElementsByTagName("tr");
function sort(type,order) {
var temp_arr = [];
var temp_tr_arr = [];
var i;
//判断type是哪一列
switch(type){
case "id": i = 0; break;
case "price": i = 1; break;
case "sales": i = 2; break;
}
//把对应的列内容放入数组temp_arr
//复制每一行所对应的信息放入temptrarr(这步很重要,虽然我们只根据一列来排序,但是排序的时候是每一行都要更换的!!!)
for(j=0; j<table_tr.length; j++){
temp_arr.push(table_tr[j].getElementsByTagName("td")[i].innerHTML); //将i列的内容全放到temp_arr
temp_tr_arr.push(table_tr[j].cloneNode(true));
}
//删除原来tbody里的每一行
var tr_length = table_tr.length;
for(var x=0; x<tr_length; x++){
table_tbody.removeChild(table_tbody.getElementsByTagName("tr")[0]);
}
//判断order是asc还是desc,sort排升序,sort+reverse排降序
if(order == "asc"){
temp_arr.sort();
}
else if(order == "desc"){
var re_arr = temp_arr.sort();
temp_arr = re_arr.reverse();
}
//将对应的每一行appendChild到tbody里面
for(var a=0; a<temp_arr.length; a++){
for(var b=0; b<temp_tr_arr.length; b++){
if(temp_arr[a]==temp_tr_arr[b].getElementsByTagName("td")[i].innerHTML){
table_tbody.appendChild(temp_tr_arr[b]);
}
}
}
}
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<table id="tb">
<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>
<script src="./index.js"></script>
</html>
CSS代码:
body,html{
padding: 0;
margin: 0∂;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}