Home > Developer > Web Develop
Add or delete a column in jqTable and add a column in jqtable.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta http-equiv = "Pragma" content = "no-cache">
<Script type = "text/javascript" src = "$ {rc. contextPath}/scripts/common/jquery/jquery-1.8.2.js"> </script>
<Title> jquery table </title>
<Style>
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;
}
. Hover
{
Background-color: # cccc00;
}
. Odd {background-color: # bbf ;}
. Even {background-color: # ffc ;}
</Style>
<Script>
$ (Document). ready (function (){
// Hover the mouse over the row to change color and create a css hover class.
// Tr: gt (0): obtains all tr values greater than tr index 0, excluding the header.
$ ("# Table1 tr: gt (0)"). hover (
Function () {$ (this). addClass ("hover ")},
Function () {$ (this). removeClass ("hover ")})
});
$ (Document). ready (function (){
// Different colors of parity rows
$ ("# 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 ")
});
$ (Document). ready (function (){
$ ("# Addcl"). click (function (){
If ($ ("# addcl"). val () = "Delete second column "){
$ ("# Table3 tr th: eq (1)"). hide ();
$ ("# Table3 tr td: nth-child (2)"). hide ();
$ ("# Addcl"). val ("Add second column ");
}
Else {
$ ("# Table3 tr th: eq (1)" ).css ("display ","");
$ ("# Table3 tr td: nth-child (2)" ).css ("display ","");
$ ("# Addcl"). val ("Delete second column ");
}
});
});
</Script>
</Head>
<Body>
<Table id = "table1">
<Tr>
<Th style = "width: 160px;"> header 1 </th>
<Th style = "width: 160px;"> header 2 </th>
<Th style = "width: 160px;"> header 3 </th>
<Th style = "width: 160px;"> header 4 </th>
<Th style = "width: 160px;"> header 5 </th>
</Tr>
<Tr>
<Td> first column of the First row </td>
<Td> second column of the First row </td>
<Td> the third column in the first row </td>
<Td> column 4 of the first row </td>
<Td> fifth column of the first row </td>
</Tr>
<Tr>
<Td> first column of the Second row </td>
<Td> second column of the Second row </td>
<Td> the third column in the second row </td>
<Td> column 4 of the second row </td>
<Td> fifth column in the second row </td>
</Tr>
<Tr>
<Td> first column of the third row </td>
<Td> second column of the third row </td>
<Td> the third column in the third row </td>
<Td> column 4 in the third row </td>
<Td> fifth column in the third row </td>
</Tr>
<Tr>
<Td> first column of the fourth row </td>
<Td> second column of the fourth row </td>
<Td> the third column in the fourth row </td>
<Td> column 4 of Row 4 </td>
<Td> fifth column in the fourth row </td>
</Tr>
</Table>
<Br/>
<Table id = "table2">
<Tr>
<Th style = "width: 160px;"> header 1 </th>
<Th style = "width: 160px;"> header 2 </th>
<Th style = "width: 160px;"> header 3 </th>
<Th style = "width: 160px;"> header 4 </th>
<Th style = "width: 160px;"> header 5 </th>
</Tr>
<Tr>
<Td> first column of the First row </td>
<Td> second column of the First row </td>
<Td> the third column in the first row </td>
<Td> column 4 of the first row </td>
<Td> fifth column of the first row </td>
</Tr>
<Tr>
<Td> first column of the Second row </td>
<Td> second column of the Second row </td>
<Td> the third column in the second row </td>
<Td> column 4 of the second row </td>
<Td> fifth column in the second row </td>
</Tr>
<Tr>
<Td> first column of the third row </td>
<Td> second column of the third row </td>
<Td> the third column in the third row </td>
<Td> column 4 in the third row </td>
<Td> fifth column in the third row </td>
</Tr>
<Tr>
<Td> first column of the fourth row </td>
<Td> second column of the fourth row </td>
<Td> the third column in the fourth row </td>
<Td> column 4 of Row 4 </td>
<Td> fifth column in the fourth row </td>
</Tr>
</Table>
<Br/>
<Div align = "center"> <input type = "button" id = "addcl" value = "Delete second column"/> </div>
<Table id = "table3">
<Tr>
<Th style = "width: 160px;"> header 1 </th>
<Th style = "width: 160px;"> header 2 </th>
<Th style = "width: 160px;"> header 3 </th>
<Th style = "width: 160px;"> header 4 </th>
<Th style = "width: 160px;"> header 5 </th>
</Tr>
<Tr>
<Td> first column of the First row </td>
<Td> second column of the First row </td>
<Td> the third column in the first row </td>
<Td> column 4 of the first row </td>
<Td> fifth column of the first row </td>
</Tr>
<Tr>
<Td> first column of the Second row </td>
<Td> second column of the Second row </td>
<Td> the third column in the second row </td>
<Td> column 4 of the second row </td>
<Td> fifth column in the second row </td>
</Tr>
<Tr>
<Td> first column of the third row </td>
<Td> second column of the third row </td>
<Td> the third column in the third row </td>
<Td> column 4 in the third row </td>
<Td> fifth column in the third row </td>
</Tr>
<Tr>
<Td> first column of the fourth row </td>
<Td> second column of the fourth row </td>
<Td> the third column in the fourth row </td>
<Td> column 4 of Row 4 </td>
<Td> fifth column in the fourth row </td>
</Tr>
<Tr>
<Td> Column 1 of the fifth line </td>
<Td> Column 2 of the fifth line </td>
<Td> column 3 of the fifth line </td>
<Td> column 4 of the fifth line </td>
<Td> column 5 of the fifth line </td>
</Tr>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
