※前端面试--js编程---动态渲染表格并实现点击头部排序

题目：请用原生js将如下数据结构转化为对应table，渲染在div.container中
数据结构为：

let tableData = {
  thead: ['头部1'，'头部2']，
  tbody: [
    [10,10],
    [9,5],
    [8,10],
    [7,10]
  ]
}

希望渲染成下图的结构，并且点击头部，将对应列的数据进行排序显示（升序，降序依次交替）

代码实现如下：

<script>
    let tableData = {
      thead: ['头部1', '头部2'],
      tbody: [
        [10, 10],
        [9, 5],
        [8, 10],
        [7, 10]
      ]
    }
    let flag = true;//点击头部的升序降序排列标志
    let container = document.getElementById('container');
    let table = document.createElement('table');
    container.appendChild(table);
    table.setAttribute('border', '1px');
    table.setAttribute('cellspacing', '0px');
    let thead = document.createElement('thead');
    table.appendChild(thead);
    let tbody = document.createElement('tbody');
    table.appendChild(tbody);
    //渲染头部和tbody，之所以将两个分开渲染是因为下面点击头部要加上点击事件，
    //这样的话，每次就只用渲染tbody部分，不用每次渲染都要给头部加上点击事件
    theadByData(tableData.thead);
    tbodyByData(tableData.tbody);
    //对头部添加点击事件
    let th = document.getElementsByTagName('th')
    for (let j = 0; j < th.length; j++) {
      th[j].onclick = function () {
        console.log(j)
        //根据点击的j，对tableData中的数据进行处理
        let data = sortData(tableData, j)
        //console.log(data)
        tbodyByData(data.tbody)
      }
    }
    function theadByData(data) {
      let str = ''
      str += '<tr>'
      for (let item of data) {
        str += `<th>${item}</th>`
      }
      str += '</tr>'
      thead.innerHTML = str;
    }
    function tbodyByData(data) {
      let str = ''
      for (let item of data) {
        str += '<tr>'
        for (let val of item) {
          str += `<td>${val}</td>`
        }
        str += '</tr>'
      }
      tbody.innerHTML = str;
    }

    function sortData(Data, index) {
      let newData = []
      //将要更新的数取出来，进行sort排序，排完序在将数据赋值回去
      for (let val of Data.tbody) {
        newData.push(val[index])
      }
      if (flag) {
        newData = newData.sort((a, b) => a - b)
      } else {
        newData = newData.sort((a, b) => b - a)
      }
      for (let key in Data.tbody) {
        Data.tbody[key][index] = newData[key]
      }
      flag = !flag;
      return Data
    }
  </script>

效果：
初始渲染：

点击头部1

再次点击头部1

点击头部2