Use jQuery to parse an HTML table instance, jquerytable

Use jQuery to parse an HTML table instance, jquerytable

Finally:

Let's take a look at the main parts:

HTML:

.td_back_color {   background-color: red; } .td_center {   text-align: center;   font-weight:bold; } 

CSS:

<Table id = "tbl_count"> <caption> 2013 Spring Festival Gala Income and Expenditure Statistics </caption> <tr> <th> name </th> <th> meal </th> <th> KTV </th> <th> barbecue </th> <th> expenses </th> <th> payable </th> </tr> <th>> weekly bidding </th> <td> </ td> </tr> ...... </table>

JavaScript:

Var data = [{picture: "http://ww1.sinaimg.cn/mw690/51baa38egw1dzl6l2hjchj.jpg", name: "", leftTime: "February 5", phone: "186 *** 2296", qq :"", workedIn: "Hangzhou, Zhejiang", cost: 200, project: "dinner, KTV, barbecue "},........ // initialize shuju var init = function () {var tbl_count = $ ("# tbl_count tr: gt (0 )"); // eat var meal_text =$ ("# tbl_count tr: first th: eq (1 )"). text (); // KTV var ktv_text = $ ("# tbl_count tr: first Th: eq (2 )"). text (); // barbecue 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]; // determine if (data_info.name = tr_info.find ("th: first") with the same name "). 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 obtains the total number of rows in a table.

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

Articles you may be interested in:

• JQuery method for obtaining the value of the first column in the table
• JQuery plug-in implements code for table line-changing and mouse-over-highlighted display
• JQuery-based paging instances for non-refreshing tables
• Click the last row of the table based on jQuery to implement the row auto-Increment Effect.
• Adjust the tr upper and lower order of table rows implemented by jQuery
• How to Use jquery to adjust the upper and lower order of table row tr instances
• Implement no-refreshing pagination of tables based on jquery
• Jquery custom Table Styles
• Use jquery to change the color of a table by line.
• Common methods and tips for using jQuery to operate tables