Code to replace the content in the table and display the progress bar based on jQuery_jquery

The rendering is as follows: http://jialiren.sinaapp.com/jdt/
Html code is as follows:

Copy code The code is as follows:

< td>1< ;/tr>
td>Task 2
td>Come on! !

Serial number	Progress Article	Progress	Remarks	Others
20	20	The progress is too slow	Work One
2	30
3	Task Three
4	80	80	Come on! !	Task 3

< /html>

My purpose is to replace the value in the second column with a bar chart. The asp.net girdview control also generates table tags, so the subsequent script also plays a role in the data presentation of the gridview. effect.

My idea is very simple. Enumerate the rows in the table, find the second column, take the value, and replace it with a div tag of corresponding length. The code is as follows:
Backend jQuery code

Copy code The 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 = '

';
$td.html(strDivJDT);
}
});
}
window.onload = showJDT;

Copy codeThe code is as follows:

var strDivId = "Gridview"; //Contains the id name of the target table div layer
var NO_JDT = 1;//The number of columns of the progress bar, starting from 0
var height_JDT = 14 ;//The thickness of the progress bar div
var color_JDT = "#00FF00"; //The color of the progress bar div
function showJDT() {
var $Gridviewtrs = $("#" strDivId " tr" );//jQuery selector, representing all rows in the target layer (tr) http://www.w3cschool.cn/jquery_selectors.html
var $td;
var $JD;
var strDivJDT ;
$Gridviewtrs.each(function () {//jQuery traversal function, iterate over jQuery objects http://www.w3cschool.cn/jquery_ref_traversing.html
$td = $(this).find( "td").first(); //find()jQuery traversal function obtains the descendants of each element in the current matching element set, and filters them by the selector. The first() jQuery traversal function reduces the matching element set into a set. The first element of http://www.w3cschool.cn/jquery_ref_traversing.htmlfor (var i = 0; i < NO_JDT; i ) { $td = $td.next();//jQuery traversal function, get Next jquery object
}
JD = parseInt($td.text());//jquery text() method to get the character content in the mark http://www.w3cschool.cn/manipulation_text.html
if (JD) {//If the character exists and is not empty
strDivJDT = '

';
$td.html(strDivJDT);jQuery html() method, change the inner html attribute of the tag http://www.w3cschool.cn/jquery_html.html
$td.attr("title",JD);//jQuery attr() method, changes the attribute of the mark. The title attribute is a friendly display with corresponding prompt value when the mouse is moved to td} });
}
window.onload = showJDT;