Use jQuery to operate on an HTML table.

This article describes how to use jQuery to parse table tables in HTML, including Tips for getting the total number of rows in a table. For more information, see:

Let's take a look at the main parts:

HTML:

.td_back_color {   background-color: red; } .td_center {   text-align: center;   font-weight:bold; } 

CSS:

 
 ...... 
  
       
  
  

    2013 Spring Festival Gala Income and Expenditure Statistics 
  
       
  
  
 
   
 
    
Name
 
    
Dinner
 
    
KTV
 
    
Barbecue
 
    
Expenditure
 
    
Payable
 
   
 
   
 
    
Weekly Competition
 
    
 
    
 
    
 
    
 
    
 
   
 
 
 

JavaScript:

Var data = [{picture :" http://ww1.sinaimg.cn/mw690/51baa38egw1dzl6l2hjchj.jpg ", Name:" ", leftTime:" February 5 ", phone:" 186 *** 2296 ", qq:" ", workedIn:" Zhejiang Hangzhou ", cost: 200, project: "dinner, KTV, barbecue "},........ // initialize shuju var init = function () {var tbl_count = $ ("# tbl_count tr: gt (0 )"); // eat var meal_text =$ ("# tbl_count tr: first th: eq (1 )"). text (); // KTV var ktv_text = $ ("# tbl_count tr: first th: eq (2 )"). text (); // barbecue 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]; // determine if (data_info.name = tr_info.find ("th: first") with the same name "). 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 obtains the total number of rows in a table.

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);