테이블의 내용을 바꾸고 jQuery_jquery를 기반으로 진행률 표시줄을 표시하는 코드

렌더링은 다음과 같습니다. http://jialiren.sinaapp.com/jdt/
Html 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

http-equiv="Content- Type" content="text/html; charset=utf-8" />

일련번호 진행 기사진행 상황비고기타
; td>1 20 20 진행 속도가 너무 느림Work One2 30작업 2 ;td>3td>어서! ! 작업 3
4 ;/td>자! ! 작업 3

html>


제 목적은 두 번째 열의 값을 막대 차트로 바꾸는 것입니다. asp.net girdview 컨트롤도 테이블 태그를 생성하므로 후속 스크립트도 데이터 표시에서 역할을 합니다. 그리드뷰 효과.

내 생각은 매우 간단합니다. 테이블의 행을 열거하고 두 번째 열을 찾아 값을 가져와 해당 길이의 div 태그로 바꿉니다.
백엔드 jQuery입니다. code



코드 복사

코드는 다음과 같습니다. // JScript 소스 코드 var strDivId = "Gridview" ; //div 포함 테이블의 ID 이름 var NO_JDT = 1;// 테이블의 JDT 번호(시작 0)

var height_JDT = 14;// JDT의 높이 px

var color_JDT = "#00FF00 "; //JDT 색상
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()); JD) {
strDivJDT = '

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





코드 복사


코드는 다음과 같습니다.

var strDivId = "Gridview"; //대상 테이블 div 레이어의 ID 이름을 포함합니다
var NO_JDT = 1;//진행률 표시줄의 열 수(0부터 시작)
var height_JDT = 14 ;//진행률 표시줄의 두께 div
var color_JDT = "#00FF00"; //진행률 표시줄의 색상
function showJDT() {
var $Gridviewtrs = $ ("#" strDivId " tr" );//jQuery 선택기, 대상 레이어의 모든 행을 나타냄(tr) http://www.w3cschool.cn/jquery_selectors.html
var $td
var $ JD;
var strDivJDT ;
$Gridviewtrs.each(function () {//jQuery 순회 함수, jQuery 객체 반복 http://www.w3cschool.cn/jquery_ref_traversing.html
$td = $ (this).find( "td").first(); //find()jQuery 순회 함수는 현재 일치하는 요소 집합에서 각 요소의 하위 항목을 가져오고 선택기로 필터링합니다. first() jQuery 순회 함수입니다. 일치하는 요소 집합을 집합으로 줄입니다. http://www.w3cschool.cn/jquery_ref_traversing.htmlfor (var i = 0; i < NO_JDT; i ) { $td = $td.next(); //jQuery 순회 함수, 다음 jquery 객체 가져오기
}
JD =parseInt($td.text());//jquery text() 메소드를 사용하여 http://www 마크의 문자 내용을 가져옵니다. w3cschool.cn/manipulation_text.html
if (JD) {//문자가 존재하고 비어 있지 않은 경우
strDivJDT = '

';
$td.html(strDivJDT);jQuery html() 메소드, http://www 태그의 내부 html 속성을 변경합니다. w3cschool.cn/jquery_html.html
$td.attr("title",JD);//jQuery attr() 메서드는 마크의 속성을 변경합니다. 마우스가 td로 이동함} })
}
window.onload = showJDT