Basic operations of Jquery Table, jquerytable

Basic operations of Jquery Table, jquerytable

Jquery is very convenient to operate the Html Table. Here we will summarize the basic operations of the Table.

First, create 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>
1. Move the mouse to the row to change the background color:
Add a css style:
.hover{  background-color: #cccc00;}
Js script:
$ (Document ). ready (function () {// move the mouse to the row to change color. A css hover class is created separately. // tr: gt (0): obtains all tr whose value is greater than tr index 0, that is, the header $ ("# table1 tr: gt (0)") is not included )"). hover (function () {$ (this ). addClass ("hover")}, function () {$ (this ). removeClass ("hover ")})});
Result execution result:
Ii. Table parity row color change:
Css for odd and even rows:
.odd{ background-color: #bbf;}.even{ background-color:#ffc; }
Js script:
$ (Document ). ready (function () {// different colors of the parity row $ ("# 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 ")});
Result:
 
III. Basic operations:
(1) Delete a row, such as deleting the second row in the table:
// Delete the specified row (second row) $ ("# table3 tr: gt (0): eq (1)"). remove ();
(2) Delete a column, such as deleting the second column in the table:
// Eq: Obtain the index of a sub-element starting from 0. First Delete the header $ ("# table3 tr th: eq (1 )"). remove (); // nth-child: Get the child element starting from 1 $ ("# table3 tr td: nth-child (2 )"). remove ();
(3) Delete other rows, such as all rows other than the second row:
 $("#table3 tr:gt(0):not(:eq(1))").remove();
(4) Delete other columns, such as all columns other than the second column:
// First Delete the header $ ("# table3 tr th: not (: eq (1 ))"). remove (); $ ("# table3 tr td: not (: nth-child (2 ))"). remove ();
(5) Hide rows, for example, hide the second row:
$ ("# 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) hide a column, for example, hide 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)" detail .css ("display", "none "); // display // $ ("# table3 tr th: eq (1)" detail .css ("display", ""); // $ ("# table3 tr td: nth-child (2) "mirror.css (" display ","");
(7) Insert a new row at the end of the table:
Var newRow = "<tr style = \" background: red; \ "> <td> first column of the new row </td> <td> second column of the new row </td> <td> third column of the new row </td> <td> fourth column of the new row </td> /td> <td> the fifth column of the new row </td> </tr> "; $ ("# table3 tr: last "). after (newRow );
(8) insert a row after the second row:
Var newRow = "<tr style = \" background: red; \ "> <td> first column of the new row </td> <td> second column of the new row </td> <td> third column of the new row </td> <td> fourth column of the new row </td> /td> <td> the fifth column of the new row </td> </tr> "; $ ("# table3 tr: gt (0): eq (1 )"). after (newRow );
(9) obtain the cell value, such as the third column in the second row:
Var v = $ ("# table3 tr: gt (0): eq (1) td: eq (2 )"). text (); // The result is displayed in the third column of the second row.
(10) obtain all values of a column, such as the second column:
Var v = ""; $ ("# table3 tr td: nth-child (2 )"). each (function () {v + = $ (this ). text () + "" ;}); // result: the second column in the first row, the second column in the second column, and the second column in the third row.
(11) obtain all values of a row, such as the second row:
Var v = ""; $ ("# table3 tr: gt (0): eq (1) td "). each (function () {v + = $ (this ). text () + "" ;}); // result: the second row, the first column, the second column, the second column, the third column, the second row, the fourth column, the second row, and the Fifth Column.
(12) Merge row cells, for example, merge the second and third cells in 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 row cells and restore the cells merged above:
// Do not use it // $ ("# 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> the third column in the second row </td> ")
(14) Merge column cells, for example, merge 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 the column cells, such as restoring the cells just merged above:
$ ("# Table3 tr: gt (0): eq (1) td: eq (1 )"). attr ("rowspan", 1); // insert a cell $ ("# table3 tr: gt (0): eq (2) td: eq (0 )"). after ("<td> second column of the third row </td> ");
(16) Add a click event for each cell, and the row index and column index of the cell are displayed:
$ (Document ). ready (function () {// click # The cell index returned by table3 $ ("# table3 td "). click (function () {var tdSeq = $ (this ). parent (). find ("td "). index ($ (this); var trSeq = $ (this ). parent (). parent (). find ("tr "). index ($ (this ). parent (); alert ("th" + (trSeq) + "Row, th" + (tdSeq + 1) + "column ");})});
-- = Source code downlink = --
Author: Rising Sun Source: Sun.