The effect figure is as follows: http://jialiren.sinaapp.com/jdt/
The HTML code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Progress bar Columns </title>
<script type= "Text/javascript" src= "/js/jquery.js" ></script>
<script type= "Text/javascript" src= "/js/jdt.js" ></script>
<body>
<div id= "Gridview" >
<table>
<tr><td> Serial </td><td> progress bar </td><td> Progress </td><td> remark </TD><TD > Other </td></tr>
<tr><td>1</td> <td>20</td> <td>20</td> <td> Progress is too slow </td><td > Work One </td></tr>
<tr><td>2</td> <td>30</td> <td>30</td> <td> Refueling </TD><TD > Task Two </td></tr>
<tr><td>3</td> <td>80</td> <td>80</td> <td> refueling!! </td><td> Task three </td> </tr>
<tr><td>4</td> <td>80</td> <td>80</td> <td> refueling!! </td><td> Task Three </td></tr>
</table>
</div>
</body>
My goal is to replace the number in the second column with a bar chart, asp.net the Girdview control generates a table label, so the following script also works for the data rendering of the GridView.
My idea is very simple, enumerate the rows in the table, find the second column, take the value, replace the corresponding length of the div tag, the code is as follows:
Back-end jquery code
Copy Code code as follows:
//JScript source code
var strdivid = "Gridview";// The idname of the div include table
var no_jdt = 1;//JDT ' s number in table (start 0)
var height_j DT = 14;//JDT ' s height px
var color_jdt = ' #00FF00 ';//jdt ' s color
function Showjdt () {
var $Gridviewtrs = $ ("#" + Strdivid + "tr");
var $td;
var $JD;
var strdivjdt;
$Gridviewtrs. Each (the function () {
$td = $ (this). FIND ("TD"). The;
for (var i = 0; i < NO _JDT; i++) {
$td = $td. Next ();
}
JD = parseint ($td. Text ());
if (JD) {
STRDIVJDT = ' <div style= ' height: ' +height_jdt+ ' px; Width: ' +jd+ ' px; Background-color: ' +color_jdt+ '; ></div> ';
$td. HTML (STRDIVJDT);
}
});
}
Window.onload = SHOWJDT;
Copy Code code as follows:
var strdivid = "Gridview"; ID name containing the target table div layer
var no_jdt = number of columns in 1;//progress bar, from 0
var height_jdt = 14;//progress bar div thickness
var color_jdt = "#00FF00"; The color of the progress bar Div
function Showjdt () {
var $Gridviewtrs = $ ("#" + Strdivid + "tr");//jquery selector that represents all the rows (TR) in the target layer http://www.w3cschool.cn/jquery_selectors.html
var $td;
var $JD;
var Strdivjdt;
$Gridviewtrs. each (function () {//jquery traversal functions to iterate over the jquery object http://www.w3cschool.cn/jquery_ref_traversing.html
$TD = $ (this). FIND ("TD"). The Find () jquery traversal function obtains the descendants of each element in the current matching element collection, filtered by the selector. The first () jquery traversal function reduces the set of matching elements to the very top element in the collection. Http://www.w3cschool.cn/jquery_ref_traversing.htmlfor (var i = 0; i < No_jdt i++) {$td = $td. Next ();//jquery traversal function to get the next A jquery object
}
JD = parseint ($td. Text ());//jquery the text () method to get the character contents in the tag http://www.w3cschool.cn/manipulation_text.html
if (JD) {//If the character exists and is not empty
STRDIVJDT = ' <div style= ' height: ' +height_jdt+ ' px; Width: ' +jd+ ' px; Background-color: ' +color_jdt+ '; ></div> ';
$td. HTML (STRDIVJDT); jQuery html () method, change inner HTML attributes for markup http://www.w3cschool.cn/jquery_html.html
$td. attr ("title", JD);//jquery attr () method, change the properties of the tag, the title property is the mouse to move to TD when the corresponding hint value friendly display});
}
Window.onload = SHOWJDT;
