Tip: you can modify some code before running
<html> <head> <title>Two-dimensional sorting table</title> <style type="text/css">* {Font-family: Tahoma, Arial, Serif; font-size: 14;} body {text-align: center; min-width: 760px;} # main {width: 720px; margin: 0 auto; text-align: left;} p {border-bottom: dotted 1px # e63; font-size: 24px; font-family: Arial; font-weight: bold;}/* set table style */table {text-align: center; border: solid 1px #4682b4; width: 80%; background-color: #4682b4;} th {background-color: # 6495ed; cursor: pointer; color: White; height: 30px;}/* after matching the cell style, the table shows a thin border */td {background-color: # fff; padding: 4px;}/* dark blue (mouse over )*/. activecol {background-color: # 005logy ;}</style> <script type="text/javascript">// ------------ Initialization and display of two-dimensional arrays ---------- // record two-dimensional Array var twoArr = new Array (5); // initialize the two-dimensional Array function initTwoArr () {for (var I = 0; I <twoArr. length; I ++) {twoArr [I] = new Array (6); for (var j = 0; j <6; j ++) {twoArr [I] [j] = getRandom () ;}} showTwoArrOnTable () ;}// obtain the random number function getRandom () {var result = Math. round (Math. random () * 100-1); return result;} // display the orders table in the table function sh OwTwoArrOnTable () {if (twoArr = null | twoArr. length <1) {alert ("array initialization failed! "); Return;} // set the value of td var allTd = document. getElementById ("tb "). getElementsByTagName ("td"); var tdIndex = 0; for (var I = 0; I <twoArr. length; I ++) {// Set the id for each cell. The Format 1-2 corresponds to the var idValue of the array subscript; for (var j = 0; j <twoArr [I]. length; j ++) {idValue = I. toString () + "-" + j. toString (); allTd [tdIndex]. id = idValue; allTd [tdIndex]. innerHTML = twoArr [I] [j]; tdIndex ++ ;}}// ------------ The following table operations ---------- // Record the current column (number type) and the current sorting order (Boolean type) var currentCol; var currentReverse; // sort function sortColumn (col-column index value) {// determine whether to reverse var doReverse of the array; // If you click the current column again, set the marker in reverse order and record the sorting method (forward/backward) if (col = currentCol) {doReverse = true; currentReverse =! CurrentReverse;} else {currentReverse = false;} // record the current sorting field currentCol = col; // put all rows of the table into the array var tb = document. getElementById ("tb"); var tbody = tb. rows [1]. parentNode; var allTr = new Array (); for (var I = 1; I <tb. rows. length; I ++) {allTr. push (tb. rows [I]);} if (doReverse) {allTr. reverse ();} else {allTr. sort (createComp (col);} // add the sorted row set to table var frag = document. createDocumentFr Agment (); for (var I = 0; I <allTr. length; I ++) {frag. appendChild (allTr [I]);} tbody. appendChild (frag);} // returns a sort rule function createComp (col) {// comparison function (forward) var compFunc = function (trA, trB) {// retrieve the value to be compared var valA = trA. cells [col]. firstChild. nodeValue. trim (); var valB = trB. cells [col]. firstChild. nodeValue. trim () return comp (valA, valB) ;}; return compFunc ;}// extends the string object to remove null at both ends of the string. Grid String. prototype. trim = function () {var reg =/^ s + | s + $/g; return this. replace (reg, "") ;}// default comparison method (ascending) function comp (a, B) {a = parseInt (a); B = parseInt (B ); return (a <B )? -1: (a> B )? 1: 0);} var desc = false; // The default value is ascending. // Sort table function sortRow (rowTh) by the input l column. {// locate rowIndex; var rowIndex; var tbody = document. getElementById ("tb "). childNodes [1]; var allTr = tbody. childNodes; for (var I = 0; I <allTr. length; I ++) {if (rowTh = allTr [I]. firstChild) {rowIndex = I; break ;}// sorts the array and then fills it in table arrRowSortFunc (rowIndex, desc); desc =! Desc; showTwoArrOnTable ();} // group and bubble sort function arrRowSortFunc (rowIndex, isDesc) {var row = twoArr [rowIndex]; for (var I = 0; I <row. length; I ++) {for (var j = 0; j <row. length-I-1; j ++) {if (isDesc) {// if it is a reverse Order if (row [j] <row [j + 1]) {// when switching the current array, you must exchange other data of the corresponding column var tmp = row [j]; row [j] = row [j + 1]; row [j + 1] = tmp; for (var m = 0; m <twoArr. length; m ++) {if (m! = RowIndex) {var tmp2 = twoArr [m] [j]; twoArr [m] [j] = twoArr [m] [j + 1]; twoArr [m] [j + 1] = tmp2 ;}}} else {// ascending if (row [j]> row [j + 1]) {// when switching the current array, you must exchange other data of the corresponding column var tmp = row [j]; row [j] = row [j + 1]; row [j + 1] = tmp; for (var m = 0; m <twoArr. length; m ++) {if (m! = RowIndex) {var tmp2 = twoArr [m] [j]; twoArr [m] [j] = twoArr [m] [j + 1]; twoArr [m] [j + 1] = tmp2 ;}}}}// set the cursor to pass through the header style function setActiveCol (activeCol) {activeCol. className = "activecol";} function setLoseFocusCol (col) {col. className = "";} // when you click cell, set the current cell to function inputValue (cell) {var oldValue = cell in the input box. innerHTML. trim (); // If you have already double-clicked it, no action is taken. var reg =/<input/gi; if (reg.test(oldValue)) return; // 否则的话，则改为输入框 var input = "<input type='text' value='" + oldValue + "' onblur='saveChange(this," + oldValue + ")' " + " />"; cell.innerHTML = input; // 把光标移到input内 cell.firstChild.focus(); } // 保存改变的值 function saveChange(input, voldValue) { // 记录输入框的值 var newValue = input.value; if (newValue == "" || isNaN(newValue)) { // 如果输入的值不是数字或者为空，则还原为原始值 newValue = voldValue; } // 处理单元格id，则可以对应数组下标 var arrIndex = input.parentNode.id; var reg = /-/; var arrIndexAB = arrIndex.split(reg); var arrIndexA = arrIndexAB[0]; var arrIndexB = arrIndexAB[1]; // 更改对应数组的值 twoArr[arrIndexA][arrIndexB] = newValue; // 更改单元格的显示 input.parentNode.innerHTML = newValue; } function showMe() { alert("作者：叶志雄"); } </script> </head> <body onload="initTwoArr()"> <div id="main"> <p>Two-dimensional sorting table</p> <table id="tb" border="0" cellpadding="1" cellspacing="1"> <thead> <tr> <th> </th> <th onclick="sortColumn(1)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 1</th> <th onclick="sortColumn(2)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 2</th> <th onclick="sortColumn(3)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 3</th> <th onclick="sortColumn(4)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 4</th> <th onclick="sortColumn(5)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 5</th> <th onclick="sortColumn(6)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Column 6</th> </tr> </thead> <tbody> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Row 1</th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Row 2</th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Row 3</th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Row 4</th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)">Row 5</th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> </td> </tr> </tbody> </table> <div >Note:<br>1. Sorting function: click the row header or list header to sort in the forward direction. If you click it again, the reverse order is performed;<br>2. Modify function: Double-click a cell to perform the input operation. When the input box loses focus, new data is saved;<br>3. Random function: the data in the table is different each time the page is refreshed;<br> </div> </div> </body> </html>
Tip: you can modify some code before running
