使用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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Yii使用技巧大汇总
2015/12/29 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP7多线程搭建教程
2017/04/21 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
js验证密码强度解析
2020/03/18 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
github配置使用指南
2014/11/18 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python决策树分类算法学习
2017/12/22 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python实现图片添加文字
2019/11/26 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
捐书寄语赠言
2014/01/18 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
初中思品教学反思
2016/02/20 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python