使用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 子窗口操作父窗口的代码
Sep 21 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 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
ftp类(myftp.php)
2006/10/09 PHP
PHP7多线程搭建教程
2017/04/21 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JsRender for object语法简介
2014/10/31 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python中csv文件的若干读写方法小结
2018/07/04 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python 格式化输出百分号的方法
2019/01/20 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
C++是不是类型安全的
2014/02/18 面试题
高级护理实习生自荐信
2013/09/28 职场文书
会议活动邀请函
2014/01/27 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
产假请假条
2014/04/10 职场文书
城管大队整治方案
2014/05/06 职场文书
推荐信怎么写
2014/05/09 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
MySQL 计算连续登录天数
2022/05/11 MySQL