使用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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
搞定immutable.js详细说明
May 02 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
js实现选项卡效果
Mar 07 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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下载文件名中解决乱码的问题
2013/06/20 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
永不消失的title提示代码
2007/02/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
python实现杨辉三角思路
2017/07/14 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python常用数据重复项处理方法
2019/11/22 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python对Excel的读取的示例代码
2020/02/14 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
pytorch SENet实现案例
2020/06/24 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
优秀大学生的自我评价
2014/01/16 职场文书
个人考核材料
2014/05/15 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2015年底工作总结范文
2015/05/15 职场文书