Features are as follows:
1. Sorting function: Click the row table header or list header to sort the order; If you click again, reverse it;
2. Modify function: Double-click a cell, you can input operation, when the input box loses focus, the new data is saved;
3. Random function: Each refresh the page, the data in the table is different;
Effect Chart:
The complete source code is as follows:
<ptml> <pead> <title> two-dimensional sort form </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; }/* With cell styles, the table presents a thin border */td {background-color: #fff; padding:4px; }/* Dark blue (mouse over) */.activecol {background-color: #005eae; } </style> <script type= "Text/javascript" >//------------The following are initialization and display operations on two-dimensional arrays----------//record two-dimensional array var Twoarr = new Array (5); Initializes a two-dimensional array of 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 (); //Get 0-100 random number function getrandom () {var result = Math.Round (Math.random () * 100-1); return result; ///Display two-dimensional table in table function showtwoarrontable () {if (Twoarr = null | | Twoarr.length < 1) {alert ("Array initialization failed!"); Return //Set TD's numeric var ALLTD = document.getElementById ("TB"). getElementsByTagName ("TD"); var tdindex = 0; for (var i = 0; i < twoarr.length; i++) {//sets the ID for each cell, and the Var idvalue corresponding to the subscript of the array in format 1-2; 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 is the action on the table----------//records the current column (numeric type) and the current sort order (Boolean) var Currentcol; var currentreverse; Sort function SortColumn (col) {//To determine whether to reverse-order Var doreverse based on (col-column index value) If you click the current column again, set the flag for the reverse order and record how the sort is sorted (positive/reverse) if (col = = Currentcol) {Doreverse = true; Currentreverse =!currentreverse; else {Currentreverse = false; //Record the currently sorted field currentcol = col; Put all rows of table into an array of 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 queued rowset to the table var Frag = Document.createdocumentfragment (); for (var i = 0; i < alltr.length i++) {frag.appendchild (alltr[i)); } tbody.appendchild (Frag); (col-column index value) returns a collation function Createcomp (col) {//comparison function (positive sequence) var Compfunc = function (TrA, TrB) {//Remove value var to compare Vala = Tra.cells[col].firstchild.nodevalue.trim (); var valb = Trb.cells[col].firstchild.nodevalue.trim () return comp (Vala, valb); }; return compfunc; The string object is extended to remove the space String.prototype.trim = function () {var reg =/^\s+|\s+$/g) at both ends of the string; Return This.replace (Reg, ""); }//default comparison (Ascending) function comp (A, b) {a = parseint (a); b = parseint (b); Return (a < b)? -1: ((a > B)? 1:0); var desc = false; Default to Ascending//Sort table function Sortrow (rowth) {//Find rowindex based on incoming l column; 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 The///array is sorted, and then populated to table Arrrowsortfunc (RowIndex, DESC); desc =!desc; Showtwoarrontable (); ///Twoarr Group 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 in reverse order if (Row[j] < Row[j + 1]) {//Exchange the current array while exchanging the 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]) {//The other data of the current array to exchange the corresponding columns with 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 mouse over header style function Setactivecol (activecol) {activecol.classname = "activecol"; function Setlosefocuscol (col) {col.classname = ""; ///When the mouse clicks the cell cells, set the current cell to the input input box function Inputvalue (cell) {var oldValue = Cell.innerHTML.trim (); If you have already double-clicked, do not do any action var reg =/\<input/gi; if (Reg.test (OldValue)) return; Otherwise, change to input box var input = "<input type= ' text ' value= '" + oldValue + "' onblur= ' SaveChange (this," + OldValue + ") '" + "/>"; cell.innerhtml = input; Move the cursor to the input cell.firstChild.focus (); }//Save changed value function SaveChange (input, Voldvalue) {//Record input box value var newvalue = Input.value; if (NewValue = = "" | | isNaN (NewValue)) {//If the value entered is not a number or is empty, revert to the original value newvalue = Voldvalue; }//Processing cell ID, you can correspond to the array subscript var arrindex = INPUT.PARentnode.id; var reg =/-/; var arrindexab = Arrindex.split (reg); var arrindexa = arrindexab[0]; var arrindexb = arrindexab[1]; Change the value of the corresponding array twoarr[arrindexa][arrindexb] = newvalue; Change the display of cells Input.parentNode.innerHTML = newvalue; function ShowMe () {alert ("Author: Ye Zhixiong"); } </script> </pead> <body onload= "Inittwoarr ()" > <div id= "main" > <p> two-dimensional sort form </p> <table id= "TB" border= "0" cellpadding= "1" cellspacing= "1" > <thead> <tr> <th> </th& Gt <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)" > Column4 </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) Onmousemov E= "Setactivecol (This)" onmouseout= "Setlosefocuscol (This)" > Line 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) > Line 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 (a) "> </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=" setactive Col (This) "onmouseout=" Setlosefocuscol (this) > Line 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 oncli Ck= "Sortrow (This)" Onmousemove= "Setactivecol (This)" onmouseout= "Setlosefocuscol (This)" > Line 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 (a) "> </td> <td onmousemove=" Setactivecol (This) Onmouseout= "Setlosefocuscol (This)" ondblclick= "Inputvalue (This)" > &nbsP </td> </tr> <tr> <th onclick= "Sortrow (This)" Onmousemove= "Setactivecol (This)" onmouseout= " Setlosefocuscol (This) "> Line 5 </th> <td onmousemove=" Setactivecol (This) "onmouseout=" Setlosefocuscol (This) "Ondblclick=" Inputvalue (This) "> </td> <td onmousemove=" Setactivecol (This) "onmouseout=" Setlosefocuscol (This) "ondblclick=" Inputvalue (a) "> </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 > Description:<br> 1. Sort function: Click the row header or list header to sort the order; If you click again, reverse;<br> 2. Modify function: Double-click a cell, you can enter operation, when the input box loses focus, the new data is saved;< Br> 3. Random function: Every time you refresh the page, the data in the table is not the same;<br> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
