js表格排序/百度前端笔试题

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;
}

js表格排序/百度前端笔试题

题目：

JS代码：

HTML代码：

CSS代码：

猜你喜欢