基于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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
介绍php设计模式中的工厂模式
2008/06/12 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
js验证表单第二部分
2006/11/25 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
javascript 写类方式之一
2009/07/05 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
python os.listdir()乱码解决方案
2021/01/31 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
一份报关员的职业规划范文
2014/01/08 职场文书
保护环境建议书300字
2014/05/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书