Dynamic operation of tables in HTML

Dynamic

Because in the project, you need to implement such a function, in the HTML page of the table row, the request can be adjusted by the user to the order of the upper and lower. It is not known whether the existing technology can achieve this function, it needs to be studied. Already known and applied before, you can create a table dynamically through your scripts, but with just a few simple features. Yesterday, I went to work to download a Microsoft DHTML reference Manual in Chinese, just to study the table object in detail tonight. First, we study how to achieve the required functions, looking at the method of the TR object, we found that there was a SwapNode method to read the detailed description of this method (in English, it seems that the manual is not fully translated into Chinese, but also good to understand), Exchange HTML document two objects. It's easy to just swap two TR objects without realizing what I need. Another problem is that I need to know that the current operation of the line (TR) in the table is the first few lines, of course, you can define the parameters to pass, but more cumbersome, once the row exchange, this row object (TR) corresponding to the parameters also change, write program is not very convenient. Looking at the properties of TR, there is a property called rowindex that can get the first row of the current row in the table, exactly as needed. Based on the above two methods, the required functionality is quickly achieved. See examples specifically:

<script type=text/javascript>function goup (tr) {var cur = tr.rowindex; if (cur>0) {otable.rows (cur). SwapNode ( Otable.rows (cur-1)); }}function Godown (tr) {var cur = tr.rowindex; if (cur<otable.rows.length-1) {otable.rows (cur). SwapNode ( cur+1)); }}function Save () {for (i=0;i<otable.rows.length;i++) {alert (otable.rows[i].id);}} </script><p align=center><input onclick=save () Type=button value= save ></P> <table id=oTable Align=center border=1><tbody><tr id=tr1><td>1</td><td><input onclick=goup (TR1 ) Type=button value=up></td><td><input onclick=godown (TR1) Type=button value=down></TD> </tr><tr id=tr2><td>2</td><td><input Onclick=goup (tr2) Type=button value=up> </td><td><input Onclick=godown (TR2) Type=button value=down></td></tr><tr ID=TR3 ><td>3</td><td><input Onclick=goup (TR3) type=bUtton value=up></td><td><input Onclick=godown (TR3) Type=button value=down></td></tr ><tr id=tr4><td>4</td><td><input Onclick=goup (TR4) Type=button Value=up></TD ><td><input Onclick=godown (TR4) Type=button value=down></td></tr></tbody></ Table>

Problem solved, and then see what good things in table, there are new discoveries to report.

1.table's Rules property: You can set the separator line for the table to display all: Show all the table lines cols: Show the inner vertical and outer frame rows: show inner horizontal and outer boxes none: Only the outer border is displayed, all inner lines do not display groups: Display the outer box, The inner horizontal line is displayed between the Thead,tbody,tfoot objects, and the vertical bar is displayed between all Colgroup objects.

When this property is not set, all table lines are displayed if the border property is defined for the table (table), and if the border property is not defined, all is not displayed, including the outer border.

A 2.frame property, similar to rules, is also used to set whether a table's border shows a 3.moveRow method: There is also a Moverow method in the table, which can also be used to exchange 4 of rows. Research on binding Data: The Datasrc property of a table can bind a data source to a table, the table displays the contents of that data source, and then you can call the table's firstpage,lastpage,nextpage. PreviousPage and other methods facilitate the rapid implementation of paging, you can use DataPageSize to specify the number of records displayed per page. Only a preliminary understanding of these, and in the future carefully study the binding data source practices.