Basic operation of Jquery Table

http://blog.csdn.net/chenglc1612/article/details/53413240

Jquery operation of Html table is very convenient, here is a simple summary of the basic operation of the table.

Start by creating a common table css and a table:

Table {border-collapse:collapse; border-spacing:0; margin-right:auto; margin-left:auto; width:800px;} th, td {Bord er:1px solid #b5d6e6; font-size:12px; Font-weight:normal; Text-align:center; Vertical-align:middle; height:20px; } th {Background-color:gray;}   

<table> <tr> <th style= "width:160px;" > Head one </th> <th style= "width:160px;" > Head II </th> <th style= "width:160px;" > Head three </th> <th style= "width:160px;" > Head four </th> <th style= "width:160px;" > Header five </th> </tr> <tr> <td> first Row first column </td> <td> first row second column </td> <td> first row third column </td> <td> first row fourth column </td> <td> first row fifth column </td> </tr> <tr> <td> second row first column </td > <td> second row second column </td> <td> second row third column </td> <td> second row fourth column </td> <td> second row fifth column </td > </tr> <tr> <td> third row first column </td> <td> third row second column </td> <td> third row third column </td> < td> third row fourth column </td> <td> third row fifth column </td> </tr> <tr> <td> fourth row first column </td> <td> Row four second column </td> <td> fourth row third column </td> <td> fourth row fourth column </td> <td> fourth row fifth column </td> </tr> </table>

First, move the mouse to the line to replace the background color:

Add a CSS style:

. hover {background-color: #cccc00;}

JS script:

$ (document). Ready (function () {//mouse move to line color, separate CSS class hover//tr:gt (0): means to get all TR that is greater than TR index 0, that is, does not include the table header $ ("#table1 tr:gt (0)" ). Hover (function () {$ (this). addclass ("hover")}, function () {$ (this). Removeclass ("hover")});

Result execution Results:

Second, the table odd even line discoloration:

Odd line and even line CSS:

. odd{background-color: #bbf;}. even{background-color: #ffc;}

JS script:

$ (document). Ready (function () {//odd-even line different color $ ("#table2 tbody tr:odd"). AddClass ("odd"),    $ ("#table2 tbody Tr:even"). AddClass ("even")//or//$ ("#table2 tbody tr:odd"). CSS ("Background-color", "#bbf"),//$ ("#table2 tbody tr:even"). CSS (" Background-color "," #ffc ")});

The results show:

Three, the basic operation:

(1) Delete rows, such as deleting the second row in the table:

Delete the specified line (second row) $ ("#table3 tr:gt (0): eq (1)"). Remove ();

(2) Delete columns, such as deleting the second column in the table:

EQ: Get child element Index starting from 0, first delete the header $ ("#table3 tr th:eq (1)"). Remove (); Nth-child: Gets the child element starting from 1 $ ("#table3 tr td:nth-child (2)"). Remove ();

(3) Delete other rows, such as all rows except the second row:

$ ("#table3 tr:gt (0): Not (: eq (1))"). Remove ();

(4) Delete other columns, such as all columns except the second column:

First delete the header $ ("#table3 tr th:not (: eq (1))"). Remove (); $ ("#table3 tr td:not (: Nth-child (2))"). Remove ();

(5) Hiding rows, such as hiding the second line:

$ ("#table3 tr:gt (0): eq (1)"). Hide (); or//$ ("#table3 tr:gt (0): eq (1)"). CSS ("display", "none")//Display//$ ("#table3 tr:gt (0): eq (1)"). CSS ("Display", "");

(6) Hiding columns, such as hiding the second column:

$ ("#table3 tr th:eq (1)"). Hide (); $ ("#table3 tr td:nth-child (2)"). Hide (); or//$ ("#table3 tr th:eq (1)"). CSS ("display", "none"); $ ("#table3 tr td:nth-child (2)"). CSS ("display", "none"); Display//$ ("#table3 tr th:eq (1)"). CSS ("Display", ""); $ ("#table3 tr td:nth-child (2)"). CSS ("Display", "");

(7) Insert a new line at the end of the table:

var newRow = "<tr style=\" background:red;\ "><td> new row first column </td><td> new row second column </td><td> New row third column </td><td> new row fourth column </td><td> new row fifth Column </td></tr> "; $ (" #table3 tr:last "). After ( NEWROW);

(8) Insert the row after the second line:

var newRow = "<tr style=\" background:red;\ "><td> new row first column </td><td> new row second column </td><td> New row third column </td><td> new row fourth column </td><td> new row fifth Column </td></tr> "; $ (" #table3 tr:gt (0): eq (1) "). After (NewRow);

(9) Get the value of the cell, such as the second row, the third column:

var v = $ ("#table3 tr:gt (0): eq (1) td:eq (2)"). text (); The results show: The second row, the third column

(10) Get all the values of a column, such as the second column:

var v = ""; $ ("#table3 tr td:nth-child (2)"). each (function () {        V + = $ (this). Text () + "";}); Result: First row second column second  row second column  

(11) Gets all the values of a row, such as the second line:

var v = ""; $ ("#table3 tr:gt (0): EQ (1) TD"). each (function () {        V + = $ (this). Text () + "";}); Results: Second row, second row, second column, second row, third column, second row,  fourth column  .  

(12) Merging row cells such as merging the second and third cells of the second row:

$ ("#table3 tr:gt (0): eq (1) td:eq (1)"). attr ("colspan", 2); $ ("#table3 tr:gt (0): eq (1) td:eq (2)"). Remove ();

(13) Split branch cells restores the merged cells above:

Note You cannot use//$ ("#table3 tr:gt (0): eq (1) td:eq (1)"). Removeattr ("colspan"); $ ("#table3 tr:gt (0): eq (1) td:eq (1)"). attr ("colspan", 1); $ ("#table3 tr:gt (0): eq (1) td:eq (1)"). After ("<td> second row, third column </td>")

(14) Merge column cells, such as the second and third cells in the second column

$ ("#table3 tr:gt (0): eq (1) td:eq (1)"). attr ("RowSpan", 2); $ ("#table3 tr:gt (0): eq (2) td:eq (1)"). Remove ();

(15) Split cells, such as the above-merged cells to restore:

$ ("#table3 tr:gt (0): eq (1) td:eq (1)"). attr ("rowspan", 1); Insert a cell after the first cell in the following row ("#table3 tr:gt (0): eq (2) td:eq (0)"). After ("<td> third row, second column </td>");

(16) Increase the Click event for each cell and pop up the cell row index and column index:

$ (document). Ready (function () {//click #table3 cell to return the cell index $ ("#table3 TD"). Click (function () {var tdseq = $ (this). Parent (). Find ("TD"). Index ($ (this)); var trseq = $ (this). The parent (). Parent (). Find ("tr"). Index ($ (this). parent ());        Alert ("First" + (TRSEQ) + "line," + (tdseq+1) + "column");    })});

Basic operation of Jquery Table