Jquery table plug-in (line-changing, color-changing, select all)

Source: Internet
Author: User
// By: xcl @ 2012.8 QQ: 80213876; (function ($) {$. extend ({xcltablelist: function (options) {Options = $. extend ({}, funs. defaults, options); funs. init (options); $ (options. tableclass ). each (function () {$ TRS = NULL; if ($ (this ). children ("tbody "). length> 0) {// the browser automatically adds the tbody tag $ TRS = options. trnohoverclass = ""? $ (This ). children (). children (): $ (this ). children (). children (). not (options. trnohoverclass);} else {$ TRS = options. trnohoverclass = ""? $ (This). Children (): $ (this). Children (). Not (options. trnohoverclass);} // slide over the line color if (options. trhovercolor! = "") {$ TRS. hover (function () {$ (this ). addclass ("xcltablelist_trhover") ;}, function () {$ (this ). removeclass ("xcltablelist_trhover") ;}/// click the row color if (options. trclickcolor! = "") {$ TRS. click (function () {$ TRS. removeclass ("xcltablelist_trclick"); $ (this ). addclass ("xcltablelist_trclick");} // the color of the even if (options. trevencolor! = "") {$ TRS. each (function (I) {if (I % 2 = 0) {$ (this ). addclass ("xcltablelist_treven") ;}} if (options. troddcolor! = "") {$ TRS. each (function (I) {if (I % 2 = 1) {$ (this ). addclass ("xcltablelist_trodd ");}});} /****** end of table style ***** // ********* start of full selection ****** // when you click full selection $ (options. checkallclass ). click (function () {$ ckall = $ (this ). closest (options. tableclass ). find (options. checkallclass); $ ckitem = $ (this ). closest (options. tableclass ). find (options. checkitemclass); If (this. checked) {$ ckitem. ATTR ({"checked": true});} else {$ ckitem. ATTR ({"ch Ecked ": false});} funs. getcheckboxids ($ ckall, $ ckitem) ;}); // when you click checkbox in the list $ (options. checkitemclass ). click (function () {$ ckall = $ (this ). closest (options. tableclass ). find (options. checkallclass); $ ckitem = $ (this ). closest (options. tableclass ). find (options. checkitemclass); var flag = 1; $ ckitem. each (function () {If (! This. checked) {flag = 0; return false ;}}); If (flag = 1) {$ ckall. ATTR ({"checked": true});} else {$ ckall. ATTR ({"checked": false});} funs. getcheckboxids ($ ckall, $ ckitem) ;});/******* end of all selections *****/});}}); vaR funs = {defaults: {tableclass :". tablelist ", // table class trhovercolor:" # Eee ", // specifies the color trnohoverclass after row sliding:" ", // The color trnohoverclass :". nohover ", // The row class trevencolor without the need to set the color:" # ecf7fb ", // the color of the even row starts with troddcolor 0: "# Fff", // the color of the odd row checkallclass :". checkall ", // select all button class checkitemclass :". checkitem ", // select the class checkedtrcolor:" # fffec9 "// the color of the selected row}, init: function (options) {// style $ (" head "). append ("<style type = 'text/CSS '>. xcltablelist_trhover {Background: "+ options. trhovercolor + "! Important;} "+". xcltablelist_trclick {Background: "+ options. trclickcolor + "! Important;} "+ ". xcltablelist_treven {Background: "+ options. trevencolor + ";}" + ". xcltablelist_trodd {Background: "+ options. troddcolor + ";}" + ". xcltablelist_trchecked {Background: "+ options. checkedtrcolor + "! Important;} "+" </style> "); // select all options $ (options. tableclass ). each (function () {$ ckall = $ (this ). closest (options. tableclass ). find (options. checkallclass); $ ckitem = $ (this ). closest (options. tableclass ). find (options. checkitemclass); var isallchecked = 1; $ ckitem. each (function () {If (! This. checked) {isallchecked = 0; return false ;}}); If (isallchecked = 1) {$ ckall. ATTR ({"checked": true}) ;}}}, // Save the array of checkbox values in the list to getcheckboxids in the value of the all-selected checkbox: function (ckall, ckitem) {var v = []; ckitem. each (function () {If (this. checked) {$ (this ). closest ("TR "). addclass ("xcltablelist_trchecked"); V. push (this. value);} else {$ (this ). closest ("TR "). removeclass ("xcltablelist_trchecked") ;}}); ckall. val (v. tostring () ;}}) (jquery );

Instructions for use
  • $. Xcltablelist ({options: optionsvalue });
Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.