首页 >

使用jQuery操作HTML的table表格的实例解析【jquery】

web前端|js教程使用jQuery操作HTML的table表格的实例解析【jquery】
jQuery,HTML,table,表格,JavaScript,js
web前端-js教程
最终效果图:
动漫网页制作源码,vscode mac汉化,ubuntu安装卡在自检,tomcat5.5.36,sqlite怎么退出命令,jquery 3d 插件,前端常用框架下载,网络爬虫 需求,php日期时间,无锡seo报价,织梦程序电影网站源码,新闻资讯网页模板,基于php的学校网站模板,php信息查询页面,开源 设备管理系统,程序代码词典lzw
简单来看一下其中的主要部分:
php收银源码,ubuntu 本地 g++,深度学习 主题爬虫,ubuntu更新php,SEO年龄限制lzw
HTML:
类似美团的源码,vscode语言包插件,ubuntu升级20.04,tomcat是Vs吗,java怎样爬虫,php sphider,株洲seo优化哪家服务好,米拓 网站搬家,帝国系统小说模板下载lzw
.td_back_color {   background-color: red; } .td_center {   text-align: center;   font-weight:bold; } 

CSS:

       ......     
2013春节聚会收支统计
姓名 吃饭 KTV 烧烤 支出 应付
周竞成
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  in a table body  $.fn.rowCount = function() {   return $('tr', $(this).find('tbody')).length; };  // USAGE:  var rowCount = $('#productTypesTable').rowCount(); alert(jQuery("#jtkList").find("table").eq(0).find("tr").length); 

  • 暂无相关文章
  • Posted in 未分类