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

前端之家收集整理的这篇文章主要介绍了使用jQuery操作HTML的table表格的实例解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最终效果图:

简单来看一下其中的主要部分:

HTML:

CSS:

2013春节聚会收支统计 姓名 吃饭 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 >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);

猜你在找的jQuery相关文章