JQuery table Operations (alternately display, drag table rows, select rows, etc.) _javascript tips

JQuery is really convenient, simple code, but it can achieve some good features.

Copy Code code as follows:

<script type= ' text/javascript ' ><!--
$ (function () {
Show rows alternately
$ (' #alternation '). Click (function () {
$ (' tbody > Tr:odd ', $ (' #example ')). Toggleclass (' alternation ');
});

Three-color alternating display rows
$ (' #alternationThree '). Click (function () {
$ (' tbody > Tr:nth-child (3n) ', $ (' #example ')). Toggleclass (' alternation ');
$ (' tbody > Tr:nth-child (3n+2) ', $ (' #example ')). Toggleclass (' Alternation3 ');
});

Select row
$ (' #selectTr '). Click (function () {
Add selection event handling for a table row
$ (' tbody > TR ', $ (' #example ')). Click (function () {
$ ('. Selected '). Removeclass (' selected ');
$ (this). AddClass (' selected '); This represents the object that raised the event, but it is not a jquery object
}). Hover (//Note the chained call here
function () {
$ (this). addclass (' MouseOver ');
},
function () {
$ (this). Removeclass (' MouseOver ');
}
);
});

Add sorting function
$ (' #sort '). Click (Tablesort);

Gets the primary key value after the order is sorted
$ (' #getSequence '). Click (function () {
var sequence = [];
$ (' #content input[name=noticeselect] '). each (function () {
Sequence.push (This.value);
});
Alert (Sequence.join (', '));
});

Gets a collection of values for 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 Descending
$ (' #dateDesc '). Click (descbydate);
});

Table sort
function Tablesort ()
{
var tbody = $ (' #example > Tbody ');
var rows = Tbody.children ();
var Selectedrow;
Select rows when pressing the mouse
Rows.mousedown (function () {
Selectedrow = this;
TBODY.CSS (' cursor ', ' move ');
return false; Prevent selection of text content when dragging, and must be used with MouseMove
});
Rows.mousemove (function () {
return false; Prevent selection of text content when dragging, and must be used with MouseDown
});
Insert when releasing the mouse button
Rows.mouseup (function () {
if (Selectedrow)
{
if (Selectedrow!= this)
{
$ (this). Before ($ (selectedrow)). Removeclass (' MouseOver '); Insert
}
TBODY.CSS (' cursor ', ' default ');
Selectedrow = null;
}
});
Indicates where the current mouse is located
Rows.hover (
function () {
if (Selectedrow && selectedrow!= This)
{
$ (this). addclass (' MouseOver '); case-sensitive, written ' mouseover '.
}
},
function () {
if (Selectedrow && selectedrow!= This)
{
$ (this). Removeclass (' MouseOver ');
}
}
);

When the user presses the mouse button to move out of the tbody, clear the cursor drag shape, previously selected Selectedrow
Tbody.mouseover (function (event) {
Event.stoppropagation (); Prevent tbody events from propagating into the outer div
});
$ (' #contain '). MouseOver (function (event) {
if ($ (event.relatedtarget). Parents (' #content ')//event.relatedtarget: Gets the element at the location of the mouse before the event occurs
{
TBODY.CSS (' cursor ', ' default ');
Selectedrow = null;
}
});
}

Sort by Date Descending
function Descbydate ()
{
var descelements = $ (' #content > TR '). Get (). Sort (function (second) {
var f = $ (' Td:eq (4) ', a). html (); A = $ (' Td:eq (4) ', A. html (); IE will have a problem, FF normal, 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 code as follows:

<table id= ' example ' style= ' width:650px; Border-collapse:collapse; " >
<thead style= "text-align:center;" style= "text-align:center;" >
&LT;TR&GT;&LT;TD colspan= ' 5 ' > Bulletin list </td></tr>
<tr>
<th style= "width:50px;" > Choice </th>
<th style= "width:50px;" > Preface </th>
<th style= "width:300px;" > Title </th>
<th style= "width:100px;" > Keywords </th>
<th style= "width:150px;" > Date </th>
</tr>
</thead>
<tbody id= ' content ' >
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 1 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >01</td>
<td> Microsoft introduced the jquery</td> in VS 2008
<td>Microsoft</td>
<td>2009-01-02 10:30</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' Noticeselect ' value= ' 2 '/></td>
&LT;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>2009-01-03 09:30</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' Noticeselect ' value= ' 3 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >03</td>
<td> Lenovo Group chairman Liu: Lenovo will succeed in one year </td>
<td> wants </td>
<td>2009-01-05 14:30</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 4 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >04</td>
<td> US lawmakers ask for legislation to limit Google Earth violations will be fined 250,000 </td>
<td>Google</td>
<td>2009-01-10 20:45</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' Noticeselect ' value= ' 5 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >05</td>
<td>firefox Lab proposes new label page concept and publishes original model </td>
<td>FireFox</td>
<td>2009-01-14 17:58</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 6 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >06</td>
<td> programming to Ruby's parent program </td>
<td>Ruby</td>
<td>2009-01-19 07:22</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 7 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >07</td>
<td>apple smartphone market share doubled to 10.7%</td>
<td>Apple</td>
<td>2009-01-21 10:44</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 8 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >08</td>
<td> MediaTek helps Windows Mobile to join the cottage Army </td>
<td> MediaTek </td>
<td>2009-01-22 16:37</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= ' 9 '/></td>
&LT;TD style= "text-align:center;" style= "text-align:center;" >09</td>
<td>nokia's Open source QT development tool release 4.5 </td>
<td>Nokia</td>
<td>2009-01-28 14:08</td>
</tr>
<tr>
&LT;TD style= "text-align:center;" style= "text-align:center;" ><input type= ' checkbox ' name= ' noticeselect ' value= '
&LT;TD style= "text-align:center;" style= "text-align:center;" >10</td>
&LT;TD&GT;GCC will accept IBM code support automatic parallel optimization </td>
<td>IBM</td>
<td>2009-02-01 21:14</td>
</tr>
</tbody>
</table>

Full code Download: JQuery table operation