使用jQuery操作HTML的table表格的实例解析


Posted in Javascript onMarch 13, 2016

最终效果图:

使用jQuery操作HTML的table表格的实例解析

简单来看一下其中的主要部分:

HTML:

.td_back_color { 
  background-color: red; 
} 
.td_center { 
  text-align: center; 
  font-weight:bold; 
}

CSS:

<table id="tbl_count"> 
      <caption>2013春节聚会收支统计</caption> 
      <tr> 
        <th>姓名</th> 
        <th>吃饭</th> 
        <th>KTV</th> 
        <th>烧烤</th> 
        <th>支出</th> 
        <th>应付</th> 
      </tr> 
      <tr> 
        <th>周竞成</th> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
      </tr> 
      ...... 
    </table>
JavaScript:
var data = [ { 
      picture : "http://ww1.sinaimg.cn/mw690/51baa38egw1dzl6l2hjchj.jpg", 
      name : "周竞成", 
      leftTime : "二月五号", 
      phone : "186****2296", 
      qq : "", 
      workedIn : "浙江 杭州", 
      cost : 200, 
      project : "吃饭,KTV,烧烤" 
    }, ........ 


// 初始化shuju 
    var init = function() { 
      var tbl_count = $("#tbl_count tr:gt(0)"); 
      // 吃饭 
      var meal_text = $("#tbl_count tr:first th:eq(1)").text(); 
      // KTV 
      var ktv_text = $("#tbl_count tr:first th:eq(2)").text(); 
      // 烧烤 
      var bbq_text = $("#tbl_count tr:first th:eq(3)").text(); 
 
      $.each(tbl_count, function(i,v){ 
        var tr_info = tbl_count.eq(i); 
        for (var i = 0; i < data.length; i++) { 
          var data_info = data[i]; 
          // 判断姓名相同的 
          if(data_info.name == tr_info.find("th:first").text()){ 
            if(data_info.project.indexOf(meal_text) != -1){ 
              tr_info.find("td:eq(0)").addClass("td_back_color"); 
            } 
            if(data_info.project.indexOf(ktv_text) != -1){ 
              tr_info.find("td:eq(1)").addClass("td_back_color"); 
            } 
            if(data_info.project.indexOf(bbq_text) != -1){ 
              tr_info.find("td:eq(2)").addClass("td_back_color"); 
            } 
            tr_info.find("td:eq(3)").addClass("td_center").text("¥"+data_info.cost); 
          } 
        } 
      }); 
    };

PS:jQuery获取表格总行数汇总

var rowCount = $('#myTable tr').length; 

var rowCount = $('#myTable >tbody >tr').length; 

$("#myTable").attr('rows').length; 

var rowCount = $('table#myTable:last').index() + 1; 

//Helper function that gets a count of all the rows <TR> in a table body <TBODY> 
$.fn.rowCount = function() { 
  return $('tr', $(this).find('tbody')).length; 
}; 
 
// USAGE: 
 
var rowCount = $('#productTypesTable').rowCount(); 

alert(jQuery("#jtkList").find("table").eq(0).find("tr").length);
Javascript 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
document.forms用法示例介绍
Jun 26 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jquery实现轮播图效果
Feb 13 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
js转换对象为xml
Feb 17 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Javascript数组Array方法解读
Mar 13 #Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 #Javascript
Javascript数组Array基础介绍
Mar 13 #Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 #Javascript
简单谈谈json跨域
Mar 13 #Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 #Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 #Javascript
You might like
php生成EXCEL的东东
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Python守护进程用法实例分析
2015/06/04 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
HTTP状态码详解
2021/03/18 杂记
中科软笔试题和面试题
2014/10/07 面试题
企业申诉管理制度
2014/01/30 职场文书
机关单位动员会主持词
2014/03/20 职场文书
班级口号大全
2014/06/09 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
建国大业观后感600字
2015/06/01 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs