最终效果图:
.td_back_color {
background-color: red;
}
.td_center {
text-align: center;
font-weight:bold;
}
<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>
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);
}
}
});
};
- 大小: 47.4 KB
分享到:
相关推荐
本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下: 这是很人性化的一款特效代码,实现点击其中一个父级,另一个之前打开的父级会自动关闭 <!DOCTYPE html> <html> <...
$('<tr><td colspan=\>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds...
本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE ...
getTable返回一个jQuery对象(或其中的Array),因此您可以对它们执行任何操作。 该表是通过DOM解析的,它是快速,正确的,并且缓存了这些数据。 // Get rows that include target cell. rows = $ ( 'td#target' ...
本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本。 在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改...
一、效果 二、代码 <!DOCTYPE HTML> <html> <head> <title>Example</title>... <table id=process cellpadding=2 cellspacing=0 border=1> <tr> <td>col0</td> <td>c
如下所示: 代码如下: function _w_table_rowspan(_w_table_id,_w_table_colnum)... _w_table_Obj = $(_w_table_id + ” tr td:nth-child(” + _w_table_colnum + “)”); _w_table_Obj.each(function(i){ if(i==0)
固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML – 模板代码: 代码如下: <table id=”test”> <tr class=”header”> <td xss=removed sort=’true’> 姓名 </td> <td xss=...
而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据源代码: HTML代码: 代码如下: <table class=”editableTable”> <thead> <tr> <th>Item1</th> <th>Item2</th> <th>Item3...
bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法: 方法一:全部自动填充table <!DOCTYPE html> <html lang="en"> <head> <meta charset=...