使用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 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python中的django是做什么的
2020/07/31 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
新年寄语大全
2014/04/12 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
技术入股合作协议书
2014/10/07 职场文书
九华山导游词
2015/02/03 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
导游带团欢迎词
2015/09/30 职场文书