最终效果图:
.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和ajax技术来实现动态添加表格行(tr)和单元格(td)功能的方法。 #### 1. 理解jQuery和ajax技术 **jQuery**是一个快速、简洁的JavaScript库,它封装了许多常用的功能,简化了JavaScript...
2. **表格(Table)操作**:在HTML中,表格由`<table>`、`<tr>`(行)、`<td>`(单元格)等元素构成。jQuery可以方便地选择、添加、删除或修改这些元素。例如,`$('table tr').sort(function(a, b){...})`可以对表格...
1. **选择表格元素**:使用jQuery的选择器(如`$('table')`)来选取表格元素,可以是整个表格,也可以是特定的行(`$('tr')`),列(`$('td')`)或者单元格(`$('th')`)。 2. **动态插入和删除行/列**:使用`.append()`...
在本文中,我们将深入探讨如何使用jQuery来实现一个伸缩表格功能,特别是在表格的最后一行上单击时可以展开或收起更多详情。这个功能在数据展示时非常实用,特别是当表格包含大量信息但屏幕空间有限时。让我们一起...
一个基本的表格由`<table>`元素开始,包含若干个`<tr>`(行)元素,每个行内又包含若干`<td>`(单元格)或`<th>`(表头)元素。动态编辑表格的关键在于监听用户交互,如点击事件,然后更新相应的表格数据。 1. **...
表格的每一行由`<tr>`标签定义,而整个表格则由`<table>`标签包裹。我们可以通过给`<td>`添加特定的类或者ID来实现选中后的变色效果。 接下来,`js`文件包含jQuery代码,这是实现特效的关键。首先,我们需要监听每...
HTML `<table>`元素用于创建表格,`<tr>`表示行,`<td>`或`<th>`分别代表数据单元格和表头单元格。在jQuery中,我们可以选择这些元素并进行操作。 合并单元格通常涉及到两个主要方面:行合并(rowspan)和列合并...
表格由 `<table>` 标签定义,`<tr>` 代表表格行,`<th>` 用于表头,而 `<td>` 用于单元格数据。jQuery 提供了一系列方法来操作这些元素。 1. **选择表格元素**: 使用 jQuery 的 `$()` 函数,可以轻松选取表格元素...
在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...
如果要针对特定表格或特定行的单元格操作,可以使用类名、ID或其他属性作为选择器。 选中单元格通常涉及改变其CSS样式,如添加一个突出显示的类。例如: ```javascript $('td').click(function() { $(this)....
### JSP Table 单元格合并 在网页开发中,表格是展示数据的重要方式之一。为了使表格看起来更简洁明了,在某些情况下我们需要对相同的单元格进行合并处理。本篇文章将详细探讨如何在 JSP(JavaServer Pages)环境中...
本文将详细讲解如何使用jQuery来操作表格,实现增删功能。 一、表格的基本结构 HTML表格由`<table>`标签定义,其中包含`<tr>`(行)标签,`<th>`(表头)和`<td>`(数据单元格)标签。例如: ```html <table id=...
一个基本的HTML表格由`<table>`标签开始,内部包含`<tr>`(行)标签,而每一行中又可以有多个`<td>`(单元格)或`<th>`(表头单元格)。如果我们想通过jQuery来操作这些元素,我们需要选择器来定位它们。 在jQuery...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等...结合jQuery的相关专题学习,如jQuery表格操作、JSON数据处理、表单操作等,可以进一步提升开发效率和代码质量。
在HTML中,每个表格都有一个唯一的`id`属性,通过这个属性我们可以引用并操作表格。 2. `3`:这个参数表示我们要根据表格的第几列进行排序。在HTML的表格结构中,每一行被称为一个`tr`元素,每一列被称为一个`td`或...
本篇文章将深入探讨如何使用jQuery来获取HTML表格(table)中的td(表格数据单元格)的值。首先,我们需要理解jQuery的基本用法以及表格元素在HTML结构中的位置。 在HTML中,表格由`<table>`标签定义,内部包含`<tr...
总结来说,通过jQuery操作表格的单元格合并,主要是利用选择器选取特定的单元格,通过条件判断和循环来比较内容,然后通过改变`rowspan`属性和隐藏不需要的单元格来实现视觉上的合并。这个过程涉及到HTML表格的基本...
在HTML中,表格由`<table>`标签定义,并包含若干行`<tr>`元素,每行又可包含若干列,即表格数据单元格`<td>`。在处理表格数据时,常常需要遍历每一行(tr),然后获取该行内每个单元格(td)的值。使用jQuery,可以...
一个简单的表格由`<table>`标签开始,包含若干行`<tr>`(表格行)和列`<td>`(表格数据单元格)。例如: ```html <table> <tr> <td>内容1</td> <td>内容2</td> </tr> <tr> <td>内容3</td> <td>内容4</td> ...
在HTML中,表格结构由`<table>`标签构成,其中包含`<tr>`标签表示行(Row),`<td>`标签表示数据单元格(Data Cell)。单元格合并通常通过`colspan`和`rowspan`属性实现,`colspan`用于横向合并单元格,而`rowspan`...