JQuery operation table (line coloring, highlighting, and filtering data) _ jquery-js tutorial

Recently, many table operations have been performed in the project. In the past, when we were doing some results, we often realized it through program code. This effort is not worth it, because JQuery can be fully implemented and the client runs without being processed by the server, quick Response to users, reduced server pressure, checked some information, and wrote four demos:

1. interlace coloring

The Code is as follows:

$ ('# Table1 tr: odd'). addClass ('odd ');
$ ('# Table1 tr: even'). addClass ('even ');

Effect:

2. Highlight rows containing specific data

The Code is as follows:

$ ("# Table2 tr: contains ('fuck')"). addClass ("selected ");

3. filter data

The Code is as follows:

$ ("# Filter"). click (
Function (){
$ ("# Table3. datarow"). hide (). filter (": contains ('abcdefg')"). show ();
}
);

4. filter data instantly based on user input

The Code is as follows:

$ ("# Keyword"). keyup (function (){
$ ("# Table3. datarow "). hide (). filter (": contains ('" + ($ (this ). val () + "')"). show ();
}). Keyup ();

Before Filtering:

Input ck:

Online Demo http://demo.jb51.net/js/2012/JQueryTableExample/
Package and download JQueryTableExample_Edi.rar