通过读取table，不改变原数据数组，实现次序升降

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

table升降专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript自动生成HTML表格并实现列排序的方法。通过解析tableData对象，可以动态创建表格，并为表头单元格添加点击事件，实现数据的升序或降序排列。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript"> 
    let tableData = {
      thead: ['头部1','头部2','头部2'],
      tbody: [
        [10,10],
        [9,10],
        [8,10],
        [7,10],
      ]
    }
    let tbody = tableData.tbody;
    let thead = tableData.thead;
    //tr row;
    //td column;
    //th head;
    let body = document.body;
    let table = document.createElement('table');
    table.border ='1px';
    table.id ='mytable';
    let tr = document.createElement('tr');
    let test = false;//判断升降


	/**
		读取table数据, 实现升降
	*/
    function sortToLow(event) {
      let cellIndex = event.srcElement.cellIndex;
      let mytable = document.getElementById('mytable')
      let sortTable = document.createElement('table');
      let mytableChildren = mytable.children;
      let sortArr = [];
      let tr = document.createElement('tr');
      // 
      for(let i = 1; i < mytableChildren.length; i++) {
        let mytableGrandson = mytableChildren[i].children;
        let tdNumber = mytableGrandson[cellIndex].innerText;
      
        sortArr.push({
          coll: i,
          value: tdNumber
        })
      }
      test ? sortArr.sort((x, y) => {
        return y.value - x.value; 
      }) : sortArr.sort((x, y) => {
        return x.value - y.value; 
      })
      test = !test

      for(let i = 0; i < thead.length; i++) { //colne会导致addEventLisnter 中的事件丢失
        let th = document.createElement('th');
        th.innerText = thead[i];
        th.addEventListener('click',sortToLow)
        tr.appendChild(th);
      }
      console.log('sortTable: ', sortTable);
      sortTable.appendChild(tr);
      for( let i = 0 ; i < sortArr.length  ; i++ ) {
        let dom = mytableChildren[ sortArr[i].coll ].cloneNode(true);
        sortTable.appendChild(dom);
      }
      

      mytable.remove();
      sortTable.id = "mytable";
      sortTable.border = "1px";
      body.appendChild(sortTable);
      
    }
	/**
		自动生成table表格
	*/
    for(let i = 0; i < thead.length; i++) {
      let th = document.createElement('th');
      th.innerText = thead[i];
      th.addEventListener('click',sortToLow)
      tr.appendChild(th);
    }
    table.appendChild(tr);

    for( let i = 0 ; i < tbody.length ; i++ ) {
      let tr = document.createElement('tr');

      for( let j = 0; j < tbody[i].length; j++) {
        let td = document.createElement('td');

        td.innerText = tbody[i][j];
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    body.appendChild(table);
  </script>
</body>
</html>