Self-compiled jQuery plug-in table style (silver stick), jquery silver
I was so frustrated: I was late for work for the first time since I changed my job. In the morning, I took a bus and found that the route was incorrect. I asked the driver to change the route from today. Nima, get off and transfer now. I switched the car and drove two stops. The car broke down and was forced to get out again. Waiting for a car near the station card, the first time the car did not rely on the station, directly go, the second time very crowded, unable to continue. I finally got to the company downstairs, fuck, the elevator broke down, and finally I was late... a wonderful morning, so I was given a round by God!
First:
The figure above has three statuses: the default status (Gray and gray), the mouse suspension status (green), and the mouse clicking status (yellow ).
The Html code is as follows:
<Table> <thead> <tr> <td> NO. </td> <td> name </td> <td> age </td> <td> operation </td> </tr> </thead> <tbody> <tr> <td> 1111 </td> <td> 1111 </td> <td> 1111 </td> <td> <input type = "button" value = "View"/> <input type = "button" value = "delete"/> </td> </tr> <tr> <td> 2222 </td> <td> 2222 </td> <td> 2222 </td> <input type = "button" value = "View" /> <input type = "button" value = "delete"/> </td> </tr> <td> 3333 </td> <td> 3333 </td> <td> 3333 </td> <input type = "button" value = "View"/> <input type = "button" value = "delete" /> </td> </tr> <td> 4444 </td> <td> 4444 </td> <td> 4444 </td> <td> <input type = "button" value = "View"/> <input type = "button" value = "delete"/> </td> </tr> <td> 5555 </td> <td> 5555 </td> <td> 5555 </td> <input type = "button" value = "View"/> <input type = "button" value = "delete"/> </td> </tr> </tbody> </table>
The plugin implementation code is as follows:
(Function () {$. fn. tabStyle = function (options) {// default parameter setting var settings = {evenClass: "tab_even", // even row style oddClass: "tab_odd", // hoverClass: "tab_hover", // mouse floating style clickClass: "tab_click", // Mouse clicking style isClick: true // whether to enable Mouse clicking style}; // merge parameters $. extend (settings, options); return this. each (function () {// Add the style for the odd and even rows respectively $ ("> tbody> tr: even", this ). addClass (settings. evenClass); $ ("> tbody> tr: odd", this ). addClass (settings. oddClass); $ ("> tbody> tr", this ). each (function (I) {// floating mouse style $ (this ). hover (function () {$ (this ). addClass (settings. hoverClass) ;}, function () {$ (this ). removeClass (settings. hoverClass) ;}); // click the style if (settings. isClick) {$ (this ). bind ("click", function () {$ (this ). addClass (settings. clickClass ). siblings ("tr "). removeClass (settings. clickClass );});}});});}})();
In some cases, we may not need the style after clicking the mouse, so we set isClick as the control switch. If you do not want to click a style, set it to false.
The DEMO is as follows:
<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> table style (silver stick) </title> <style type =" text/css "> table {width: 700px; border: 1px solid green; border-collapse: collapse;} table td {height: 40px; text-align: center; width: 25% ;}. tab_even {background-color: # DDD ;}. tab_odd {background-color: White ;}. tab_hover {background-color: Green; color: White ;}. tab_click {background-color: Orange ;} </style>
We recommend jquery table plug-ins.
Jquery jqgrid www.trirand.com/blog/jqgrid/jqgrid.html
Jquery plug-in Table sharding
Grid? JqGrid is a heavyweight recommendation. Others include Flexigrid and ingrid.
There are many wonderful plug-ins below
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
