使用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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
js获取ip和地区
2017/03/10 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
小程序实现搜索框
2020/06/19 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python动态视频下载器的实现方法
2019/09/16 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python基于内置函数type创建新类型
2020/10/22 Python
如何一键升级Python所有包
2020/11/05 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Linux文件系统类型
2012/02/15 面试题
ajax是什么及其工作原理
2012/02/08 面试题
简单英文演讲稿
2014/01/01 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
党风廉政承诺书
2014/03/27 职场文书
擅自离岗检讨书
2014/09/12 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书