《用法jQuery操作HTML的table表格的实例解析_.docx》由会员分享，可在线阅读，更多相关《用法jQuery操作HTML的table表格的实例解析_.docx（6页珍藏版）》请在三一文库上搜索。
1、用法jQuery操作HTML的table表格的实例解析_ 这篇文章主要介绍了用法jQuery操作HTML的table表格的实例解析,包括用jQuery猎取表格总行数的小技巧,需要的伴侣可以参考下 最终效果图： 简洁来看一下其中的主要部分： HTML： .td_back_color background-color: red; .td_center text-align: center; font-weight:bold; CSS： table id=tbl_count caption2021春节聚会收支统计/caption tr th姓名/th th吃饭/th thKTV/th th烧烤/th
2、 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:/ name : 周竞成, leftTime : 二月五号, phone : 186*2296, : , workedIn : 浙江 杭州, cost : 200, project : 吃饭，KTV，烧烤 , . / 初始化shuju var init = function() var tbl_count = $(#tbl_count tr:gt(0); / 吃饭 va
3、r 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 = datai; / 推断姓名相
4、同的 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(t
5、d: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); .