使用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 不能释放内存.
Sep 07 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python实现推箱子游戏
2020/03/25 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
浅析python实现动态规划背包问题
2020/12/31 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
《泉水》教学反思
2014/04/11 职场文书
土木工程求职信
2014/05/29 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript