<!DOCTYPE HTML><HTMLLang= "zh"> <Head> <MetaCharSet= "Utf-8"/> <title>007 Toggle Data Table rows and columns</title> <styletype= "Text/css">Table{Border:1px solid #ccc;font-size:14px; }table th,. Header{background:Orange;Color:#fff;padding:10px; }Table TD{padding:10px; } </style> <Scripttype= "Text/javascript"src=".. /js/jquery-1.11.0.js "></Script> <Scripttype= "Text/javascript"> $(function() { $('#change'). Click (function(){ var$tableNew= $('<table></table'), $tableOld= $('Table'); for (varI= 0; I< 4; I++) { var$trNew= $('<tr></tr>'); for (varJ= 0; J< 4; J++) { var$tdNew= $('<td></td>'), Content=$tableOld. Find ('Tr:eq (' +J+ ')'). Children (). EQ (i). html (); $tdNew. HTML (content); if(J== 0) {$tdNew. addclass ('Header'); } $trNew. Append ($tdNew); } $tableNew. Append ($trNew); } $('Body'). Append ($tableNew); }); }) </Script> </Head> <Body> <Table> <TR> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </TR> <TR> <TD>Data 1-1</TD> <TD>Data 1-2</TD> <TD>Data 1-3</TD> <TD>Data 1-4</TD> </TR> <TR> <TD>Data 2-1</TD> <TD>Data 2-2</TD> <TD>Data 2-3</TD> <TD>Data 2-4</TD> </TR> <TR> <TD>Data 3-1</TD> <TD>Data 3-2</TD> <TD>Data 3-3</TD> <TD>Data 3-4</TD> </TR> </Table> <ButtonID= "Change">Change</Button> </Body></HTML>
[jquery Programming Challenge]007 to toggle data tables