思路

全选和反选
- 全选事件的关联：首先获取全选的按钮，进行点击绑定，接着获取全选按钮的状态，接着把list的状态设置为全选的状态
- 反选：通过事件委托给每一个复选框进行事件绑定，定义一个值，计算选中的数量，判断选中的数量和列表是否相同进行反选
文字排序和数字排序
- 通过localeCompare()方法来比较文字排序
- 通过sort来比较数字排序

 <table class="container">
    <thead>
      <tr>
        <th>
          <input type="checkbox" id="checkAll"></input>
        </th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>职位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>6</td>
        <td>艾伦</td>
        <td>21</td>
        <td>交互设计师</td>
      </tr> 
      <tr>
        <td><input type="checkbox"></td>
        <td>22</td>
        <td>玛丽</td>
        <td>30</td>
        <td>测试员</td>
      </tr> 
      <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>王同学</td>
        <td>24</td>
        <td>C++程序员</td>
      </tr> 
      <tr>
        <td><input type="checkbox"></td>
        <td>17</td>
        <td>小明</td>
        <td>28</td>
        <td>PHP工程师</td>
      </tr> 
      <tr>
        <td><input type="checkbox"></td>
        <td>5</td>
        <td>刘同学</td>
        <td>24</td>
        <td>web前端设计</td>
      </tr> 
    </tbody>
   </table>

(function () {
  var checkAll = document.getElementById('checkAll')
  var tbody = document.getElementsByTagName('tbody')[0]
  var checkOneList = tbody.getElementsByTagName('input')
  var ths = document.getElementsByTagName('th')
  var rows = tbody.getElementsByTagName('tr')

  // 定义程序用户
  var init = function () {
    initEven()
  }

  // 绑定事件的函数
  var initEven = function () {
    checkAll.addEventListener('click', onCheckAllclick)
    tbody.addEventListener('click', onCheckOneList)
    for (var i = 0; i < ths.length; i++){
      handleThsClick(ths[i], i)
    }

  }

  // 全部按钮事件绑定参数
  var onCheckAllclick = function () {
    var checkStatus = this.checked
    // 将list的状态设置为全选的状态
    for (var i = 0; i < checkOneList.length; i++){
      checkOneList[i].checked = checkStatus
    }
  }

  // 反选
  var onCheckOneList = function (e) {
    if (e.target.tagName !== 'INPUT') return
    var checkNum = 0
    for (var i = 0; i < checkOneList.length; i++) {
      checkOneList[i].checked && checkNum++
    }
    // 判断列表选中的长度和列表的长度相同，则赋值给全选按钮
    checkAll.checked = checkNum === checkOneList.length
  }

  // 排序
  var handleThsClick = function (th, index) {
    if (index === 0) return 
    th.addEventListener('click', function () {
      var arr = Array.prototype.slice.call(rows).sort(function (a, b) {
        if (index === 2 || index === 4) {
          return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML, 'zh')
        } else {
          return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML
        }
      })
      for (var i = 0; i < arr.length; i++){
        tbody.appendChild(arr[i])
      }
    })
  }

  init()
})()

动态排序表格

思路