Jquery table operations (alternate display, drag table rows, select rows, etc)

Jquery is really convenient and simple Code But can implement some good functions. Copy code The Code is as follows: <SCRIPT type = 'text/JavaScript '> <! --
$ (Function (){
// Display rows Alternately
$ ('# Altern'). Click (function (){
$ ('Tbody> TR: odd', $ ('# example'). toggleclass ('altern ');
});

// Three-color alternating display line
$ ('# Alternationthree'). Click (function (){
$ ('Tbody> TR: Nth-child (3N) ', $ (' # example '). toggleclass ('altern ');
$ ('Tbody> TR: Nth-child (3N + 2) ', $ (' # example '). toggleclass ('alternation3 ');
});

// Select a row
$ ('# Selecttr'). Click (function (){
// Add select event processing for table rows
$ ('Tbody> tr', $ ('# example'). Click (function (){
$ ('. Selected'). removeclass ('selected ');
$ (This). addclass ('selected'); // This indicates the object that triggers the event, but it is not a jquery object.
}). Hover (// note the chained call here
Function (){
$ (This). addclass ('mouseover ');
},
Function (){
$ (This). removeclass ('mouseover ');
}
);
});

// Added the sorting function.
$ ('# Sort'). Click (tablesort );

// Obtain the sorted primary key value
$ ('# Getsequence'). Click (function (){
VaR sequence = [];
$ ('# Content input [name = noticeselect]'). Each (function (){
Sequence. Push (this. value );
});
Alert (sequence. Join (','));
});

// Obtain the value set of the selected check boxes in the table.
$ ('# Getselected'). Click (function (){
VaR sequence = [];
$ ('# Content input [name = noticeselect]: checked'). Each (function (){
Sequence. Push (this. value );
});
Alert (sequence. Join (','));
});

// sort by date in descending order
$ ('# datedesc'). Click (descbydate);
});

// table sorting
function tablesort ()
{< br> var tbody =$ ('# example> tbody ');
var rows = tbody. children ();
var selectedrow;
// select a row when you press the mouse down
rows. mousedown (function () {
selectedrow = This;
tbody.css ('cursor ', 'Move');
return false; // prevent text content from being dragged. It must be used with mousemove
});
rows. mousemove (function () {
return false; // prevents text content from being selected when dragging. It must be used with mousedown
});
// insert when the mouse button is released
rows. mouseup (function () {
If (selectedrow)
{< br> If (selectedrow! = This)
{< BR >$ (this ). before ($ (selectedrow )). removeclass ('mouseover'); // insert
}< br> tbody.css ('cursor ', 'default');
selectedrow = NULL;
}< BR >});
// specifies the current mouse position
rows. hover (
function () {
If (selectedrow & selectedrow! = This)
{< BR >$ (this ). addclass ('mouseover'); // case sensitive. Writing 'mouseover' won't work
}< BR >},
function () {
If (selectedrow & selectedrow! = This)
{< BR >$ (this). removeclass ('mouseover');
}< BR >}< br>);

// When you press the mouse key to remove the tbody, clear the drag shape of the cursor. previously selected selectedrow
Tbody. Mouseover (function (event ){
Event. stoppropagation (); // disable the tbody event from spreading to the outer Div.
});
$ ('# In in'). Mouseover (function (event ){
If ($ (event. relatedtarget). Parents ('# content') // event. relatedtarget: gets the element at the cursor position before the event occurs.
{
Tbody.css ('cursor ', 'default ');
Selectedrow = NULL;
}
});
}

// Sort by date in descending order
Function descbydate ()
{
VaR descelements = $ ('# content> tr'). Get (). Sort (function (first, second ){
VaR F = $ ('td: eq (4) ', first=.html (); // first = $ ('td: eq (4)', first=.html (); there will be problems in IE, FF is normal, the same below
VaR S = $ ('td: eq (4) ', second=.html ();
If (F <s)
Return 1;
If (F = s)
Return 0;
Return-1;
});
$ (Descelements). appendto ('# content ');
}
// --> </SCRIPT>

HTML: Copy code The Code is as follows: <Table id = 'example 'style = "width: pixel PX; border-collapse: collapse;">
<Thead style = "text-align: center;" style = "text-align: center;">
<Tr> <TD colspan = '5'> announcement list </TD> </tr>
<Tr>
<TH style = "width: 50px;"> optional </Th>
<TH style = "width: 50px;"> sort order </Th>
<TH style = "width: 300px;"> topic </Th>
<TH style = "width: 100px;"> words </Th>
<TH style = "width: 150px;"> release date </Th>
</Tr>
</Thead>
<Tbody id = 'content'>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '1'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 01 </TD>
<TD> microservices introduce jquery in vs 2008 </TD>
<TD> Microsoft </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '2'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 02 </TD>
<TD> Linux Microsoft sun will explore the future of the Operating System </TD>
<TD> sun </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '3'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 03 </TD>
<TD> Liu Chuanzhi, Lenovo Group Chairman: Lenovo will succeed within one year </TD>
<TD> desired region </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '4'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 04 </TD>
<TD> the US Parliament requires legislation to limit the daily penalty of 0.25 million for Google Earth violations </TD>
<TD> Google </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '5'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 05 </TD>
<TD> the Firefox lab proposes a new tab concept and releases the original model </TD>
<TD> firefox </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '6'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 06 </TD>
<TD> learn from the father of Ruby Program Design </TD>
<TD> ruby </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '7'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 07 </TD>
<TD> Apple's smartphone market share doubled to 10.7% </TD>
<TD> Apple </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '8'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 08 </TD>
<TD> lianfa helped Windows Mobile to join the army of shanzhai </TD>
<TD> lianfa branch </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '9'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 09 </TD>
<TD> Nokia's open-source QT development tool version 4.5 </TD>
<TD> Nokia </TD>
<TD> </TD>
</Tr>
<Tr>
<TD style = "text-align: center;" style = "text-align: center; "> <input type = 'checkbox' name = 'noticeselect 'value = '10'/> </TD>
<TD style = "text-align: center;" style = "text-align: center;"> 10 </TD>
<TD> GCC will accept support for Automatic Parallel Optimization of IBM Code </TD>
<TD> IBM </TD>
<TD> </TD>
</Tr>
</Tbody>
</Table>

Download complete code: jquery table operations