In the implementation process of the accounting system recently, the customer requires that each entry be automatically selected when the credential entry is entered. If the entry is in the hidden area of its Div, scroll to the display area. Because the current row highlighted by JS control has been previously implemented, you only need to implement automatic scrolling of the current row. Considering that all the credential entries are placed in the DIV, you can use JavaScript to control certain attributes of the Div. Google's results show that scrolltop is used together with offsettop and offsetheight, this function can be implemented.
The system automatically saves each edited entry. Therefore, the requirement for saving the current entry information is required, and the ID of each entry is unique, the "curitemid" attribute is used to record the ID of the currently edited Credential Entry. After the entire document is loaded, the hidden "Itemid" in each line is compared with the "curitemid". If they are the same, set this row to be selected and obtain the "offsettop" of this row by default. It is also compared with the sum of the "offsettop" and "offsetheight" attribute values of the outer Div, if the offsettop> offsettop + offsetheight of the outer Div of the current row is hidden and displayed, move the scrolltop of the outer Div down until the current row is moved to the display area of the outer Div. The specific implementation code is as follows:
Function loadedoprt () {// onload event <br/> var currowobj = NULL; // The current row <br/> var curitemid = document. myform. curitemid. value; // the ID of the current Credential Entry <br/> var itemtbobj = document. getelementbyid ("credenceitem"); // table object containing item <br/> If (itemtbobj & itemtbobj. rows. length> 0) {<br/> for (VAR I = 0; I <itemtbobj. rows. length; I ++) {<br/> var Itemid = document. getelementsbyname ("Itemid") [I]. value; // subject id <br/> If (curitemid & (curitemid = Itemid) {<br/> currowobj = itemtbobj. rows [I]; <br/> break; <br/>}< br/> disphelpinfo (currowobj); // The current row being operated, it is equivalent to triggering the onclick event <br/>}< br/> var divobj = document. getelementbyid ("credencecontent"); <br/> var divtop = divobj. offsettop + divobj. offsetheight; <br/> If (currowobj) {<br/> var curtop = currowobj. offsettop; <br/> If (curtop> divtop) {<br/> divobj. scrolltop + = (curtop-divtop) + divtop; <br/>}< br/> function loadedoprt () {// onload event <br/> var currowobj = NULL; // The current row <br/> var curitemid = document. myform. curitemid. value; // the ID of the current Credential Entry <br/> var itemtbobj = document. getelementbyid ("credenceitem"); // table object containing item <br/> If (itemtbobj & itemtbobj. rows. length> 0) {<br/> for (VAR I = 0; I <itemtbobj. rows. length; I ++) {<br/> var Itemid = document. getelementsbyname ("Itemid") [I]. value; // subject id <br/> If (curitemid & (curitemid = Itemid) {<br/> currowobj = itemtbobj. rows [I]; <br/> break; <br/>}< br/> disphelpinfo (currowobj); // The current row being operated, it is equivalent to triggering the onclick event <br/>}< br/> var divobj = document. getelementbyid ("credencecontent"); <br/> var divtop = divobj. offsettop + divobj. offsetheight; <br/> If (currowobj) {<br/> var curtop = currowobj. offsettop; <br/> If (curtop> divtop) {<br/> divobj. scrolltop + = (curtop-divtop) + divtop; <br/>}</P> <p> <body onload = "loadedoprt ()" ></P> <p>
This section describes the meanings of attributes such as scrolltop and offsetop for reference.
The top attribute is only available when the position attribute of an object is set. Otherwise, this attribute is ignored.
The value of postop is actually the same as that of top, but the difference is that the unit of top elements is PX, while that of postop is only a value. Therefore, postop is generally used for calculation.
Scrolltop is the distance from the vertical scroll bar of an element to the top of the element.
Offsetheight is the height of its own elements, and scrollheight is the height of its own elements + the height of hidden elements.
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/cyq1984/archive/2009/10/15/4675091.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
