jQuery操作表格与单元格

发布时间:2020-05-08编辑:脚本学堂
本文介绍了jquery操作表格元素以及单元格的方法,juery操作table、tr、td等元素的例子,需要的朋友参考下。

最终效果,如下图:
<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>表格与单元格

完整代码:
 

复制代码 代码示例:

.td_back_color { 
    background-color: red; 

.td_center { 
    text-align: center; 
    font-weight:bold; 
} www.jb200.com
<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> 
<script>
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"); 
}  www.jb200.com
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); 
        } 
    } 
}); 
};
</script>

以上分享的jquery实例代码,实现了表格元素table、tr、td的判断与样式操作等,希望对大家有所帮助。