最终效果图:
简单来看一下其中的主要部分:
HTML:
.td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; }
CSS:
姓名 | 吃饭 | KTV | 烧烤 | 支出 | 应付 |
---|---|---|---|---|---|
周竞成 |
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 rowsin 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 loginPrevious article:一步步教大家编写酷炫的导航栏js+css实现_jquery Next article:原生javascript+css3编写的3D魔方动画旋扭特效_javascript技巧Statement of this WebsiteThe 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.cnLatest Articles by Author
2024-08-24 18:42:17 2024-08-24 18:38:17 2024-08-24 18:35:17 2024-08-24 18:34:38 2024-08-24 18:34:11 2024-08-24 18:33:42 2024-08-24 18:33:21 2024-08-24 18:33:17 2024-08-24 18:32:44 2024-08-24 18:32:17Latest IssuesSteps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...From 2023-11-06 16:41:5001225I have...From 2023-11-01 23:01:1901209Support jQuery's Transfer-Encoding:chunked I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...From 2023-10-25 23:44:3701230Automatically expand text area I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...From 2023-10-21 08:49:2302225Related TopicsMore>Popular RecommendationsPopular TutorialsMore>
![]()
![]()
JAVA Beginner's Video Tutorial2357905![]()
Latest DownloadsMore>
- About us Disclaimer Sitemap
- php.cn:Public welfare online PHP training,Help PHP learners grow quickly!