基于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 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
微信红包随机生成算法php版
2016/07/21 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python设计模式之单例模式实例
2014/04/26 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
档案检查欢迎词
2014/01/13 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
挂科检讨书范文
2014/02/20 职场文书
自我评价优缺点范文
2015/03/11 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
Golang数据类型和相互转换
2022/04/12 Golang
python数据处理之Pandas类型转换
2022/04/28 Python