Home > Developer > JavaScript
Http://jialiren.sinaapp.com/jdt/:
The Html code is as follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> progress bar </title>
<Script type = "text/javascript" src = "/js/jquery. js"> </script>
<Script type = "text/javascript" src = "/js/jdt. js"> </script>
</Head>
<Body>
<Div id = "Gridview">
<Table>
<Tr> <td> NO. </td> <td> progress bar </td> <td> progress </td> <td> remarks </td> <td> Other </td> </tr>
<Tr> <td> 1 </td> <td> 20 </td> <td> 20 </td> <td> the progress is too slow </td> <td> Work 1 </td> </tr>
<Tr> <td> 2 </td> <td> 30 </td> <td> 30 </td> <td> fuel </td> <td> Task 2 </td> </tr>
<Tr> <td> 3 </td> <td> 80 </td> <td> 80 </td> <td> come on !! </Td> <td> Task 3 </td> </tr>
<Tr> <td> 4 </td> <td> 80 </td> <td> 80 </td> <td> come on !! </Td> <td> Task 3 </td> </tr>
</Table>
</Div>
</Body>
</Html>
My goal is to replace the value of the second column with a bar chart. The asp.net girdview control also generates a table label, so the subsequent script also works for the data presentation of the gridview.
My idea is very simple. enumerate the rows in the table, find the second column, set the value, and replace it with the div tag of the corresponding length. The Code is as follows:
Back-end jQuery code
Copy codeThe Code is 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_JDT = 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 (function (){
$ Td = $ (this). find ("td"). first ();
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> ';
Javastd.html (strDivJDT );
}
});
}
Window. onload = showJDT;
Copy codeThe Code is as follows:
Var strDivId = "Gridview"; // id name containing the target table div Layer
Var NO_JDT = 1; // The number of columns in the progress bar, starting from 0.
Var height_JDT = 14; // The div thickness of the progress bar
Var color_JDT = "#00FF00"; // the color of the progress bar div
Function showJDT (){
Var $ Gridviewtrs = $ ("#" + strDivId + "tr"); // jQuery selector, indicating all rows (tr) http://www.w3cschool.cn/jquery_selectors.html in the target Layer
Var $ td;
Var $ JD;
Var strDivJDT;
$ Gridviewtrs. each (function () {// jQuery traversal function, iterative http://www.w3cschool.cn/jquery_ref_traversing.html for jQuery objects
$ Td = $ (this ). find ("td "). first (); // find () jQuery traversal function to obtain the descendant of each element in the currently matched element set, which is filtered by the selector. The first () jQuery traversal function reduces the set of matching elements to the first element in the set. 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 jquery object
}
JD = parseInt ($ td. text (); // jquery text () method to get the character content http://www.w3cschool.cn/manipulation_text.html In the tag
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> ';
Javastd.html (strDivJDT); jQuery html () method to change the inner html attribute http://www.w3cschool.cn/jquery_html.html of the tag
$ Td. attr ("title", JD); // The jQuery attr () method to change the tag attributes. When the title attribute is moved to td, the corresponding prompt value is displayed }});
}
Window. onload = showJDT;
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
