使用jQuery操作HTML的table表格的实例解析
更新时间:2016年03月13日 11:47:56 作者:qiaolevip
这篇文章主要介绍了使用jQuery操作HTML的table表格的实例解析,包括用jQuery获取表格总行数的小技巧,需要的朋友可以参考下
最终效果图:

简单来看一下其中的主要部分:
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);
相关文章
为jquery的ajax请求添加超时timeout时间的操作方法
这篇文章主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法,文中通过一段简单的代码给大家介绍jquery ajax超时设置方法,感兴趣的朋友跟随脚本之家小编一起看看吧2018-09-09
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
这篇文章主要介绍了html+jQuery实现拖动滑块图片拼图验证码插件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
jQuery点击改变class并toggle及toggleClass()方法定义用法
这篇文章主要介绍了jQuery点击改变class并toggle及toggleClass()方法定义用法的相关资料,需要的朋友可以参考下2015-12-12
jquery easyui combobox模糊过滤(示例代码)
这篇文章主要介绍了jquery easyui combobox模糊过滤(示例代码)。需要的朋友可以过来参考下,希望对大家有所帮助2013-11-11


最新评论