45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:怎么样使用jQuery操作HTML的table表格?

怎么样使用jQuery操作HTML的table表格?

2016-03-24 08:23:54 来源:www.45fan.com 【

怎么样使用jQuery操作HTML的table表格?

最终效果图:

怎么样使用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); 

本文地址:http://www.45fan.com/bcdm/43456.html
Tags: jquery 操作 html
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部