最终效果图:
简单来看一下其中的主要部分:
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);
本文向大家介绍AngularJS中table表格基本操作示例,包括了AngularJS中table表格基本操作示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS表格基本操作。分享给大家供大家参考,具体如下: css内容: HTML正文: 效果: 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门
本文向大家介绍使用jsoup解析html的table中的文本信息实例,包括了使用jsoup解析html的table中的文本信息实例的使用技巧和注意事项,需要的朋友参考一下 jsoup是一个非常好用的html解析工具。使用时需要下载相应的jar包。 下面就是我使用jsoup解析html的表格的java源代码。 亲测可用! 以上这篇使用jsoup解析html的table中的文本信息实例就是小编分享给
本文向大家介绍javascript实现表格增删改操作实例详解,包括了javascript实现表格增删改操作实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现表格增删改操作的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。
我在xhtml页面上遇到此错误 此处出错 IDE:Netbeans IDE 13 服务器:GlassFish 6.2.5(6.2.1) 这是我的internetprog。xhtml代码 这是我的大学项目。当我单击创建时,我需要向我的PostgreSQL DB添加一些项目。 我在130行写了#{InternetBean.create}命令按钮和#{e.id},但是它们不能正常工作。请帮助我解决这个问
本文向大家介绍javascript操作表格排序实例分析,包括了javascript操作表格排序实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下: 完整例子如下: 希望本文所述对大家的javascript程序设计有所帮助。
本文向大家介绍jQuery实现可编辑的表格实例讲解(2),包括了jQuery实现可编辑的表格实例讲解(2)的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现可编辑表格的具体代码,供大家参考,具体内容如下 我们最终要达到的效果如下: 当单击学号列的时候,可以进行编辑: 当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有与后台交互) 页面代码如下(asp.net