使用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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
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实现读取和编写XML DOM代码
2010/04/07 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
详解python读取image
2019/04/03 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
农村婚礼证婚词
2014/01/10 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
财务工作个人总结
2015/02/27 职场文书
2015大学生求职信范文
2015/03/20 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书