欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-12 22:22:38
...
最终效果图：

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

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

HTML：

.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 





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

使用jQuery操作HTML的table表格的实例解析_jquery
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。


相关文章


相关视频










网友评论


文明上网理性发言，请遵守 新闻评论服务协议
我要评论






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

    • 

    

    


    

    

    

    

    专题推荐
    


    

    

    

    作者信息
    

    

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

    

    

    认证0级讲师
    

    

    

    

    发布技术文章
    

    

      

    • 最新文章
      • 

    • 热门排行
      • 

    

    

    

    

    

    

    

    
推荐视频教程
    

  • 
使用jQuery操作HTML的table表格的实例解析_jqueryjavascript初级视频教程

    • 

  • 
使用jQuery操作HTML的table表格的实例解析_jqueryjquery 基础视频教程

    • 

    

    

    
视频教程分类
    


    

    

    

    


    ：公益在线php培训，帮助PHP学习者快速成长！
    

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1使用jQuery操作HTML的table表格的实例解析_jquery关于我们免责申明赞助与捐赠广告合作
    

    

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

    

    



    

    					
    
															
    
						相关标签：												
							jQuery						
												
							HTML						
												
							table						
												
							表格						
												
							JavaScript						
												
							js						
											
    
															
    
						
    
							上一篇：							
								thinkphp3.2.3 验证码问题							
						
    
						
    
							下一篇：							
								CodeIgniter php mvc框架 中国网站_php技巧							
						
    
					
    
															
    
						
    
							推荐阅读