In the past, we used js to write some table line-changing code. Let's see how to achieve line-changing using jquery. If you have any need to know, please refer
Html + jquery code
| The Code is as follows: |
Copy code |
<Style type = "text/css">
Body {
Font-size: 12px; text-align: center;
}
# TbStu {
Width: 260px; border: 1px solid #666; background-color: # eee;
}
# TbStu tr {
Line-height: 23px;
}
# TbStu tr th {
Background-color: # ccc; color: # fff;
}
# TbStu. trOdd {
Background-color: # fff;
}
</Style>
<Script src = "jQuery/jquery-1.9.1.js"> </script>
<Script type = "text/javascript">
/
// JQuery selector method (select the row of the table, and select a row)
$ (Function (){
$ ('# TbStu tr: nth-child (even)'). addClass ("trOdd ");
// When jQuery copies content to a DIV, it does not need to check whether the DIV exists.
// Condition ('{divmain'{.html ('this is a detection page ');
})
</Script>
</Head>
<Body>
<Table id = "tbStu" cellpadding = "0" cellspacing = "0">
<Tbody>
<Tr>
<Th> Student ID </th> <th> name </th> <th> gender </th>
</Tr>
<Tr>
<Td> 1001 </td> <td> Zhang Xiaoming </td> <td> male </td> <td> 320 </td>
</Tr>
<Tr>
<Td> 1002 </td> <td> Li Mingqi </td> <td> female </td> <td> 350 </td>
</Tr>
<Tr>
<Td> 1003 </td> <td> Zhang San </td> <td> male </td> <td> 150 </td>
</Tr>
</Tbody>
</Table>
</Body> |
Js Writing Method
Common JS writing
| The Code is as follows: |
Copy code |
<Script>
Window. onload = function (){
Var oTb = document. getElementById ('tbtu ');
For (var I = 0; I <oTb. rows. length-1; I ++ ){
If (I % 2)
{
OTb. rows [I]. className = "trOdd ";
}
}
}
</Script> <Body>
<Table id = "tbStu" cellpadding = "0" cellspacing = "0">
<Tbody>
<Tr>
<Th> Student ID </th> <th> name </th> <th> gender </th>
</Tr>
<Tr>
<Td> 1001 </td> <td> Zhang Xiaoming </td> <td> male </td> <td> 320 </td>
</Tr>
<Tr>
<Td> 1002 </td> <td> Li Mingqi </td> <td> female </td> <td> 350 </td>
</Tr>
<Tr>
<Td> 1003 </td> <td> Zhang San </td> <td> male </td> <td> 150 </td>
</Tr>
</Tbody>
</Table> |
