使用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 相关文章推荐
js类 from qq
Nov 13 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
JavaScript实现英语单词题库
Dec 24 Javascript
vue 封装面包屑组件教程
Nov 16 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实现图形显示Ip地址的代码及注释
2014/01/20 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
机关出纳岗位职责
2014/04/03 职场文书