使用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 相关文章推荐
JavaScript将数据转换成整数的方法
Jan 04 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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日历[测试通过]
2008/03/27 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python中str.join()简单用法示例
2018/03/20 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
师范生自荐信
2013/10/27 职场文书
车贷收入证明范本
2014/01/09 职场文书
护士辞职信范文
2014/01/19 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
妇产科护理心得体会
2016/01/22 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
如何撰写创业策划书
2019/06/27 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Python3 类型标注支持操作
2021/06/02 Python