Basic operation of Jquery Table

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 {    border: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> & lt;td> third row third column </td> <td> third row fourth column </td> <td&gtThird row Fifth column </td> </tr> <tr> <td> fourth row first column </td> <td> fourth row 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 result is: The third column of the second row

(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  third 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 () + "";}); /Result: Second row, first column, second row, 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 cells after the first cell in the following line ("#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). The parent (). Find ("TD"). Index ($ (this));        var trseq = $ (this). The parent (). Parent (). Find ("tr"). Index ($ (this). parent ());        Alert ("First" + (TRSEQ) + "line," + (tdseq+1) + "column");    })});

--= Source Download =--

Basic operation of Jquery Table