基于jQuery替换table中的内容并显示进度条的代码


Posted in Javascript onAugust 02, 2011

效果图如下:http://jialiren.sinaapp.com/jdt/
Html代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>进度条列</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>序号</td><td>进度条</td><td>进度</td><td>备注</td><td>其他</td></tr> 
<tr><td>1</td> <td>20</td> <td>20</td> <td>进度太慢了</td><td>工作一</td></tr> 
<tr><td>2</td> <td>30</td> <td>30</td> <td>加油</td><td>任务二</td></tr> 
<tr><td>3</td> <td>80</td> <td>80</td> <td>加油!!</td><td>任务三</td> </tr> 
<tr><td>4</td> <td>80</td> <td>80</td> <td>加油!!</td><td>任务三</td></tr> 
</table> 
</div> 
</body> 
</html>

我的目的是把第二列的数值替换成条状图,asp.net girdview 控件生成的也是table标签,因此后面的脚本对gridview的数据呈现也起作用。

我的思路很简单,枚举table中的行,找到第二列,取值,替换成对应长度的div标记,代码如下:
后端jQuery代码

 
 // 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>'; 
 $td.html(strDivJDT); 
 } 
 }); 
 } 
 window.onload = showJDT;

var strDivId = "Gridview"; //含有目标table div层的id名称 
var NO_JDT = 1;// 进度条的列数,从0计起 
var height_JDT = 14;// 进度条div的厚度 
var color_JDT = "#00FF00"; //进度条div的颜色 
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 = '<div style="height: '+height_JDT+'px; width: '+JD+'px; background-color:'+color_JDT+';"></div>'; 
$td.html(strDivJDT);jQuery html()方法,更改标记的 inner html属性 http://www.w3cschool.cn/jquery_html.html 

  $td.attr("title",JD);//jQuery attr()方法,更改标记的属性,title属性是的鼠标移至td时有对应的提示值友好显示出来 
} }); 
} 
window.onload = showJDT;

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
JavaScript库 开发规则
Jan 31 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 #Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 #Javascript
js禁止小键盘输入数字功能代码
Aug 01 #Javascript
js内置对象 学习笔记
Aug 01 #Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 #Javascript
js动态加载以及确定加载完成的代码
Jul 31 #Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 #Javascript
You might like
实用函数4
2007/11/08 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
庆六一宣传标语
2014/10/08 职场文书
开幕式邀请函
2015/01/31 职场文书
小学班主任个人总结
2015/03/03 职场文书
外贸英文求职信范文
2015/03/19 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
MySQL数据库查询之多表查询总结
2022/08/05 MySQL