Apply Excel in ASP. NET: (8) Add the editing function for HTML tables

You can add an editing function for an HTML table. This function is displayed when you click a cell (term: Activation, the background is different from other inactive cells. After the user completes editing, the cell content is updated. If you use a direction key, the cell activation status is changed. The entire process is similar to that in Excel.

To achieve the above purpose, we must first process the onactivate and ondeactivate events of cells. The specific implementation is as follows:

// Function onCellActivate () {var parentTbl = this. parentElement. parentElement; // The parent container of the cell. In the HTML element, the cell is <TD>, and its parent is <TR>, <TR> the parent is <TABLE> // clear the status of the previous activated cell if (parentTbl. activeCell! = Null) // does the previous one exist in the activated cell? {If (parentTbl. activeCell! = This) // is it the same as the current one? {ParentTbl. activeCell. style. backgroundColor = ''; // if not, clear the background parentTbl. activeCell. innerHTML = parentTbl. activeCell. dataField. length> 0? ParentTbl. activeCell. value2: ''; // restore the display content} if (parentTbl. activeCell! = This) // if the current cell and the previous activated cell are not the same {parentTbl. activeCell = this; // set the current cell to the Activated Cell // Insert the edit box this. innerHTML = '<INPUT type = "text" value = "' + this. dataField + '"style =" border-top: none; border-left: none; border-right: none; border-bottom: 1px dashed black; background-color: transparent; font-weight: bold; color: black; "'+ 'onkeydown =" return onTextBoxKeydown (); "' + 'onchange =" return onTextBoxChange (); "> </INPUT> '; var textBox = this. children [0]; // retrieves the textBox object. width = this. offsetWidth; // set the textBox width. align = 'right'; // alignment mode. textBox does not work. setActive (); textBox. focus (); this. style. backgroundColor = '# CCCCFF'; // sets a conspicuous background, indicating that the cell is active} // The deactivating event of the cell. // when the cell is activated, the edit box appears, cell will lose activation, and this event will trigger function onCellDeactivate () {var parentTbl = this. parentElement. parentElement; // obtain Table if (parentTbl. activeCell! = This) // If the activated cell is not the current cell? {This. innerHTML = this. dataField. length> 0? This. value2: ''; // restore the display content }}

Of course, unlike window programs, HTML can mount events during design. Therefore, after loading the page, we need to initialize the events for cells except row and column headers, you can also merge cells across rows:

Document. onreadystatechange = function () // initialize TABLE {if (this. readyState = 'complete') {initTable (); // initialization} function initTable () {for (var idx in document. worksheet) // traverse all tables {var tbl = $ get (document. worksheet [idx]. table); // obtain the TABLE object for (var I = tbl. cells. length-1; I> 1; I --) // traverse all cells from the back to the front {var ctrl = tbl. cells [I]; // if (ctrl. cellIndex> 0 & ctrl. parentElement. rowIndex> 0) // The first row and the first column do not process {ctrl. onactivate = onCellActivate; // click ctrl in the activation event of the cell. ondeactivate = onCellDeactivate; // The deactivating event of the cell if (ctrl. _ rowspan & ctrl. _ rowspan> 1 & ctrl. parentElement. rowIndex + 1 <tbl. rows. length) // if you want to merge cells, merge them {for (var n = 1; n <ctrl. _ rowspan; n ++) // merge {if (ctrl. cellIndex <tbl. rows [ctrl. parentElement. rowIndex + 1]. cells. length) tbl. rows [ctrl. parentElement. rowIndex + 1]. deleteCell (ctrl. cellIndex);} ctrl. rowSpan = ctrl. _ rowspan; // set the span }}}}}

Notice that the document. worksheet object does not exist? This object is added and filled when a table is generated, including all worksheet names and table IDs. The format is as follows:

Document. worksheet = {'table': null, // id of the HTML table, 'name': ''// worksheet name };

To enable the arrow keys to work, you must add a button event to the edit box:

// Function ontextboxkeydown () {var sender = event. srcelement, // event Property Code = event. keycode; If (sender. parentelement & sender. parentelement. tagname = 'td ') {var TBL = sender. parentelement. parentelement. parentelement, // table object Col = sender. parentelement. cellindex, // column number ROW = sender. parentelement. parentelement. rowindex; // switch (CODE) // process the key code {Case 37: // left {sender. onchange (); // manually trigger the change event and in the activation event if (COL> 1) // The first column is the header and does not need to activate TBL. rows [row]. cells [col-1]. onactivate ();} break; Case 38: // top {sender. onchange (); If (row> 1) TBL. rows [row-1]. cells [col]. onactivate ();} break; Case 39: // right {sender. onchange (); If (COL <TBL. rows [row]. cells. length-1) TBL. rows [row]. cells [col + 1]. onactivate ();} break; Case 13: Case 40: // down {sender. onchange (); If (row <TBL. rows. length-1) TBL. rows [row + 1]. cells [col]. onactivate (); Return false;} break;} // switch} return true ;}

After changing the content of the edit box, you also need to update the cell content and the data you hold. This requires the onchange event to be handled:

// Function ontextboxchange () {var src = event. srcelement; // event property if (SRC. parentelement & SRC. parentelement. tagname = 'td ') {var val = SRC. value. trim (); // remove the space if (Val! = SRC. parentelement. datafield) // is the content changed? {// Update the data domain SRC. parentelement. datafield = val; SRC. parentelement. value2 = val; SRC. parentelement. hasformula =/=. */. test (VAL); // use a regular expression to determine if it is a formula }}}

Now, our HTML table has the editing function similar to excel.