Here I use the Jquery library, so I don't need to introduce it too much. There are several knowledge points:
-Selector tr: eq (index), indicating that the tr element of the specified index is selected, and the index starts from 0.
-TempRow. parent (): returns the parent node object of the tempRow object.
-$ ("<Td/>"). prependTo () indicates adding a td element to the Content Header of the specified element.
Instance code
Index.html
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script src = "jquery. js" language = "javascript"> </script>
<Style type = "text/css">
<! --
Body, td, th {
Font-family: Verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
}
# Gridview, # gridview td {border: 1px # ccc solid; border-collapse: collapse ;}
-->
</Style>
</Head>
<Body>
<Table id = "gridview" width = "386" border = "0" cellspacing = "0" cellpadding = "6">
<Tr>
<Td width = "59" align = "center"> <strong> lessons </strong> </td>
<Td width = "76" align = "center"> <strong> shift </strong> </td>
<Td width = "73" align = "center"> <strong> shift </strong> </td>
<Td width = "130" align = "center"> <strong> attendance time </strong> </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> one shift </td>
<Td> White shift </td>
<Td> 2011-09-09 </
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> one shift </td>
<Td> night shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> two shifts </td>
<Td> White shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> two shifts </td>
<Td> White shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> two shifts </td>
<Td> night shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> three shifts </td>
<Td> morning shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> three shifts </td>
<Td> middle shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Chen weixun </td>
<Td> three shifts </td>
<Td> evening shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> one shift </td>
<Td> White shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> two shifts </td>
<Td> White shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> two shifts </td>
<Td> White shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> two shifts </td>
<Td> night shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> three shifts </td>
<Td> night shift </td>
<Td> 2011-09-09 </td>
</Tr>
<Tr>
<Td> Zhang wenjun </td>
<Td> three shifts </td>
<Td> middle shift </td>
<Td> 2011-09-09 </td>
</Tr>
</Table>
<Script>
Var grid = $ ("# gridview ");
Var rowCount = grid. find ("tr"). length-1;
Var flagRow = grid. find ("tr: eq (" + rowCount + ")"). find ("td: eq (0)" pai.html ();
Var sp = 0;
For (var I = rowCount; I> = 0; I --){
Var tempRow = grid. find ("tr: eq (" + I + ")");
If (flagRow = tempRow. find ("td: eq (0)" pai.html ()){
TempRow. find ("td: eq (0)"). remove ();
}
Else {
$ ("<Td/> "). attr ("rowspan", rowCount-i-sp).html (flagRow ). prependTo (tempRow. parent (). find ("tr: eq (" + (I + 1) + ")"));
FlagRow = tempRow. find ("td: eq (0)" pai.html ();
Sp = rowCount-I;
If (I! = 0 ){
TempRow. find ("td: eq (0)"). remove ();
}
}
}
</Script>
</Body>
</Html>
Comment out the Jquery code
Run the Jquery code
Summary
The code is very rough, just taking a note. Recently, I have been busy compiling some Jquery plug-ins and discuz plug-ins. articles related to Python and PyQt have not been prepared yet, not enough time. Jquery is quite good. After the built-in Sizzle selector, the speed is even more general. It seems that it is now in version 1.6. I hope it will be better and better!