Abstract:
The specification discloses a method of generating a dynamic editable table in a web page. The method includes the steps of: transmitting data from a server to a client according to a user&#39;s instructions; using the data to generate the dynamic editable table and display it on a web page shown on the client&#39;s browser; allowing the client to perform various editing and statistical operations on the dynamic editable table; and simultaneously modifying and storing the corresponding data on the server.

Description:
BACKGROUND OF THE INVENTION  
         [0001]    1. Field of the Invention  
           [0002]    The invention relates to a method of generating a dynamic editable table and, in particular, to a method of generating a dynamic editable table in a web page.  
           [0003]    2. Related Art  
           [0004]    Tables generated by the current web page design technology are static. Users can only follow designated ways to browse the table, but are unable to perform complicated operations such as appending, modifying, viewing real-time counting and sorting. Even if they allow a user to perform simple operations on the table data, new data have to be transmitted from the server in order to update the web page, breaking continuous operations on the table.  
           [0005]    Furthermore, more and more web page designs provide real-time update functions for controls, input and editing from multiple parties. It is thus highly desirable to have a method that can generate a dynamic editable table in a web page.  
         SUMMARY OF THE INVENTION  
         [0006]    The invention discloses a method for implementing a dynamic table in a web page. Such a dynamic table allows such functions as appending, deleting, and modifying records in the table. It can also implement such functions as inputting counting, sorting, recording selections, and input device controls. All dynamic operations are completed on the client end without updating the web page from the server.  
           [0007]    An objective of the invention is the method of generating a dynamic editable table in a web page. It uses Java Script to implement the dynamic interactive operations of the table.  
           [0008]    The disclosed method can dynamically insert buttons, selection frames, input frames and other controls and HTML elements in the table. Thus, the user can use the browser to browse data and, at the same time, edit and organize data.  
           [0009]    Another objective of the invention is to allow a programmer to repeatedly use the same table at various times and in various ways without designing it all over again. 
       
    
    
     BRIEF DESCRIPTION OF THE DRAWINGS  
       [0010]    The invention will become more fully understood from the detailed description given hereinbelow. However, the following description is for purposes of illustration only, and thus is not limitative of the invention, wherein:  
         [0011]    [0011]FIG. 1 is a block diagram of the main functional module of the invention;  
         [0012]    [0012]FIG. 2 is a flowchart of the data generating module;  
         [0013]    [0013]FIG. 3 is a flowchart of the table processing module;  
         [0014]    [0014]FIG. 4 is an operational flowchart of the mouse operation in the dynamic operation module;  
         [0015]    [0015]FIG. 5 is an operational flowchart of the keyboard operation in the dynamic operation module;  
         [0016]    [0016]FIG. 6 is an operational flowchart of the table assigned event;  
         [0017]    [0017]FIG. 7 is a flowchart of storing data; and  
         [0018]    [0018]FIG. 8 is a schematic view showing the effects of generating a dynamic editable table in a web page. 
     
    
     DETAILED DESCRIPTION OF THE INVENTION  
       [0019]    As shown in FIG. 1, the main functional module of the invention includes a data generating module  101 , a table processing module  102 , a dynamic operation module  103 , and a data storing module  104 . The data generating module  101  transmits data from a server  100  to a client  200 . The table processing module  102  generates a dynamic table and displays it on a web page  105  shown on the browser at the client&#39;s computer. The dynamic operation module  103  allows a user to perform various operations such as editing and counting on the dynamic table. The operation result is directly modified on the web page  105 . The data storing module  104  makes simultaneous modifications of the data on the server  100 . The function of each module is described as follows.  
         [0020]    (1) The Data Generating Module  101 :  
         [0021]    As shown in FIG. 2, step  201  analyzes a user&#39;s data request. Step  202  determines whether data in a database are needed. If the data is not needed, data are directly generated according to the user&#39;s request in step  203  or a blank data is provide for the user to fill out. If the database is used, data search criteria satisfying the request are generated in step  204 . Step  205  opens the database according to the criteria. Data are obtained in step  206 . Finally, the “Response.Write” method is employed to distribute all obtained data to the web page  105  shown to the client  200  in step  207 .  
         [0022]    (2) The Table Processing Module  102 :  
         [0023]    In the web page  105  shown to the client  200 , the table processing module  102  directly processes the original data to generate a table. This procedure is shown in FIG. 3. Step  301  obtains a set of original data. Step  302  processes the table header, generating a field header HTML statement, providing sorting events at field headers and assigning field widths. Step  303  process the table body, generating HTML statements for each record, providing selected record events, editing methods, controls, and HTML elements in the table body. Step  304  processes the table footer, setting a statistical value. Finally, step  305  generates the table HTML statements. The table header, the table body and the table footer are combined together and shown in the web page  105 .  
         [0024]    (3) Dynamic Operation Module  103 :  
         [0025]    The user operations include mouse operation  1031  and keyboard operation  1032 .  
         [0026]    As shown in FIG. 4, when the user clicks a FieldName (step  401 ), the module generates a sorting event (step  402 ). The clicked field is then sorted in ascending order. Clicking once more sorts the field in descending order. If the user clicks the table body (step  403 ), the module determines whether there is any selection record (step  404 ). If there is a selection record, then the selection record is set as unselected (step  405 ). For example, if some row is selected, then the contents in the row are stored and the inserted control for the row disappears. The row is then set as unselected. If there is no selection record, then the clicked record is marked as selected (step  406 ), e.g., the contents of a clicked row are set as selected. Afterwards, a field is set as editable (step  407 ) to generate an input frame for the user to select records for editing. Assigned controls and HTML elements are then inserted (step  408 ) for the user to manipulate.  
         [0027]    The keyboard operation is shown in FIG. 5. When the user presses direction keys on the keyboard, the original contents in the row are stored and the original inserted control for the row disappears. Pressing the Up key selects its previous row (step  501 ) and the Down key selects the following row (step  502 ). Pressing the PageUp key selects the first row of the previous page (step  503 ) while the PageDown key selects the first row of the following page (step  504 ).  
         [0028]    The user defined operation  1033  is shown in FIG. 6. Through the default table generating method, the user can choose APPEND (step  601 ) to add new elements to the web page  105  (step  6011 ), DELETE (step  602 ) to delete assigned elements from the web page  105  (step  6021 ), MODIFY (step  603 ) to modify assigned elements in the web page  105  (step  6031 ), and ATTRIBUTE (step  604 ) to obtain the attributes of the currently assigned elements, such as the row number and content (step  6041 ).  
         [0029]    (4) The Data Storing Module  104 :  
         [0030]    This module operates at the server end, as shown in FIG. 7. First, an SQL statement is generated (step  701 ). Such commands as UPDATE, DELETE, and INSERT are used to assign contents to be updated (step  702 ). Afterwards, the open method of data connection is used to call the SQL statement (step  703 ) and to store data in the database (step  704 ).  
         [0031]    As shown in FIG. 8, all tables are generated on a web page using the disclosed method. They satisfy all of the user&#39;s requirements in operating data. In the selected data  802 , the user can directly enter data to editable fields  801  such as “External Code” and “Quantity”. The user can also press the Date selection button  804  to enter a date. By pressing fields  803  such as “Quantity”, “Product Code”, and “Locator”, data will be sorted accordingly. Furthermore, the user can choose a selection menu  805  to select the locator status.  
         [0032]    The invention being thus described, it will be obvious that the same may be varied in many ways. Such variations are not to be regarded as a departure from the spirit and scope of the invention, and all such modifications as would be obvious to one skilled in the art are intended to be included within the scope of the following claims.