使用jQuery操作HTML的table表格的實例解析_jquery
html
javascript
jquery
js
table
表格
最終效果圖:
簡單來看看其中的主要部分:
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);
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
刺客信條陰影:貝殼謎語解決方案
1 個月前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
2 週前
By DDD
Inzoi:如何申請學校和大學
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)