Outline
As the format of the report, when the number of rows of data and more, at the time of check data can be quite difficult to see a good line or eyesight job. So, to avoid this situation occurring test eyesight, or give statements add a little skill.
Common way is to increase the interlaced Harmonia function, no matter which part of this reporting tools, has introduced basic, such as Run Dry statements: Design Skills Report interlaced Harmonia ] ( http://c.raqsoft.com.cn/ Article This article was / 1533022149478? r = bubblegum ). Although this method is basically solved the situation wrong line, but a page out of a bit like a zebra, a long tiring visual point of view, does not guarantee the eyes do not spend, and this fixed interlaced Harmonia also appears to be not so big on .
Well, there is no other alternative, both to highlight the current line of view, but also who want to light who will light up?
The answer is definitely yes, for example, today we want to introduce two kinds:
1, when the mouse is moved into a row, only the current row and the current row is highlighted;
2, when a mouse click on a row, the current row and only the current line is highlighted
Maybe it seems the same, but slightly different implementation, and practical applications, users often have referred to this in two ways how to achieve?
Method Description
Click the mouse into or implement the current line highlighted, actually change the current row cell styles (css) by js events. Know the basic solution ideas, then move the mouse that is onMouseMove, removed (moved to another line should be changed to the original style) that is onMouseOut. Similarly, mouse clicks onClick, here to do two things at the same time, a realization is click on the row highlighted (change the background color, such as blue), the second is a click of the former should change the line to the original style.
Implementation
Here the effect of adding a report by a mesh (e.g., shown in the Summary).
Report ready
Run Dry statements based Orders table comes with demo database, prepared as outlined in the report.
The report is defined as:
Wherein the first row is the header, the behavior of the second access lines.
The Web side effects such as show
Mouse moved out of the way to achieve
1, the second row is increased html event
Select the second line, find the right side of the property html events, and define values are:
οnmοuseοver=‘changeStyle(this)’ οnmοuseοut=‘changeBackStyle(this)’
2, the function js defined Jsp
function changeStyle(obj){
var row = obj.parentNode;
for(var i=0;i<row.cells.length;i++){
// Focus: The background color of each cell in the current row has changed
row.cells[i].style.background =‘#0099ff’;
}
}
function changeBackStyle(obj){
var row = obj.parentNode;
for(var i=0;i<row.cells.length;i++){
// Focus: After the mouse out of the background color to the primary colors
row.cells[i].style.background=‘white’;
}
}
3, to see the effect (gif)
Mouse click way to achieve the current row
1, the second row is increased html event
Select the second line, find the right side of the property html events, and define values are:
onClick=‘changeStyle(this)’
It should be only one event, while completing change the background color click on the row and click the last row.
2, the function js defined Jsp
was hRow = null;
// hRow rows history Click OK, that last click
function changeStyle(obj){
var row = obj.parentNode;
for(var i=0;i<row.cells.length;i++){
// here is to change the background color click on the line
row.cells[i].style.background =‘#0099ff’;
}
// Key: When the point has been the other rows, change it back to its background color
if(hRow!=null){
for(var i=0;i<hRow.cells.length;i++){
hRow.cells[i].style.background=‘white’;
}
}
// The current record for the history clicking on the row row
hRow = row;
}
3, to see the effect (gif)
Thus, due to report generation is a standard html script, so for some special front-end results, we can consider be implemented by js + css, direction and this is considered in the event of front-end problems, and also did not implement routine so complicated.
