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

WBOY
Release: 2016-05-16 15:10:46
Original
1666 people have browsed it

最终效果图:

2016313114422666.jpg (815×386)

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

HTML:

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


CSS:

 ...... 
2013春节聚会收支统计
姓名 吃饭 KTV 烧烤 支出 应付
周竞成
Copy after login
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); } } }); };
Copy after login

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);
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!