這篇文章主要介紹了使用jQuery操作HTML的table表格的實例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下

最終效果圖：

簡單來看一下其中的主要部分：

HTML：

.td_back_color { 

  background-color: red; 

} 

.td_center { 

  text-align: center; 

  font-weight:bold; 

} 

CSS：

<table id="tbl_count"> 

      <caption>2013春節(jié)聚會收支統(tǒng)計</caption> 

      <tr> 

        <th>姓名</th> 

        <th>吃飯</th> 

        <th>KTV</th> 

        <th>燒烤</th> 

        <th>支出</th> 

        <th>應(yīng)付</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獲取表格總行數(shù)匯總

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);