Javascript operation table

<P> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> </P> <style> body {font-size: 9pt; padding-Right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px;} input {font-size: 9pt; Height: 15pt; width: 50px; cursor: default;} table {font-size: 9pt; Word-break: Break-all; cursor: default; Border: Black 1px solid; Background-color: # eeeecc; border-collapse: collapse; border-color: #999999; align: center ;} </style> <p> <br/> <Table width = "100%" border = "1" cellspacing = "0" cellpadding = "2" id = "powertable"> <tr align = "Middle" bgcolor = "# ffcc00"> <TD> first name </TD> <TD> last name </TD> <TD> Team </TD> <TD> engine </TD> <TD> tyres </TD> <TD> fastest lap </TD> <TD> country </TD> </tr> <TD> Michael </TD> <TD> Schumacher </TD> <TD> Ferrari </TD> <TD> Bridgestone </TD> <TD> 1.15.872 </TD> <TD> Germany </TD> </tr> <TD> Rubens </TD> <TD> Barrichello </TD> <TD> Ferrari </TD> <TD> Bridgestone </TD> <TD> 1.16.760 </TD> <TD> France </TD> </tr> <TD> Ralph </TD> <TD> Schumacher </TD> <TD> Williams </TD> <TD> BMW </TD> <TD> Michelin </TD> <TD> 1.16.297 </TD> <TD> USA </TD>/ tr> <TD> Juan-Pablo </TD> <TD> Montoya </TD> <TD> Williams </TD> <TD> BMW </TD> <TD> Michelin </TD> <TD> 1.17.123 </TD> <TD> Cambodia </TD> </tr> <TD> David </TD> <TD> Coulthard </TD> <TD> mclare N </TD> <TD> Mercedes </TD> <TD> Bridgestone </TD> <TD> 1.16.423 </TD> <TD> Thailand </TD> </tr> <tr> <TD> Mika </TD> <TD> Hakkinen </TD> <TD> McLaren </TD> <TD> Mercedes </TD> <TD> Bridgestone </TD> <TD> 1.16.979 </TD> <TD> Vietnam </TD> </tr> <TD> Jarno </TD> <TD> trulli </TD> <TD> Jordan </TD> <TD> Honda </TD> <TD> Bridgestone </TD> <TD> 1.16.459 </TD> <TD> Philippines </TD> </tr> <TD> Ricardo </TD> <TD> Zonta </TD> <TD> Jordan </TD> <TD> Honda </ TD> <TD> Bridgestone </TD> <TD> 1. 17.328 </TD> <TD> UK </TD> </tr> <TD> Olivia </TD> <TD> Panis </TD> <TD> bar </TD> <TD> Honda </TD> <TD> Bridgestone </TD> <TD> 1.16.771 </TD> <TD> Mongolia </TD> </tr> <tr> <TD> Jacques </TD> <TD> keep eneuve </TD> <TD> bar </TD> <TD> Honda </TD> <TD> Bridgestone </TD> <TD> 1.172.1635 </TD> <TD> Malaysia </TD> </tr> <TD> Kimi </TD> <TD> Raikkonen </ TD> <TD> Sauber </TD> <TD> Petronas </TD> <TD> Bridgestone </TD> <TD> 1.16.875 </TD> <TD> Myanmar </ TD> </tr> <TD> Nick </TD> <TD> Heidfeld </TD> <TD> Sauber </TD> <TD> Petronas </TD> <TD> Bridgestone </TD> <TD> 1.17.165 </TD> <TD> North Korea </TD> </tr> <TD> Eddie </TD> <TD> Irvine </TD> <TD> Jaguar </TD> <TD> cosworth </TD> <TD> Michelin </TD> <TD> 1.1838516 </TD> <TD> China </TD> </tr> <TD> Pedro </TD> <TD> de la Rosa </TD> <TD> Jaguar </TD> <TD> Cosworth </TD> <TD> Michelin </TD> <TD> 1.18.015 </TD> <TD> Russia </TD> </tr> <TD> Hugh </TD> <TD> gengine </TD> <TD> lotus </TD> <TD> Renault </TD> <TD> Michelin </TD> <TD> 1.15.015 </TD> <TD> Korea </TD> </tr> <TD> Gloria </TD> <TD> slap </TD> <TD> Lotus </TD> <TD> Renault </TD> <TD> Michelin </TD> <TD> 1.15.012 </TD> <TD> japan </TD> </tr> </table> <p> <input type = "button" value = "ins_row" onclick = "add_row (main_tab) "> <input type =" button "value =" ins_col "onclick =" add_col (main_tab) "> <input type =" button "value =" del_row "onclick =" del_row (main_tab) "> <input type =" button "value =" del_col "Onclick =" del_col (main_tab) "> <input type =" button "value =" Restore "onclick =" res_tab (main_tab) "> <input type =" button "value =" Export "onclick =" exp_tab (main_tab) "> <br/> (move: <br/> <input type = "button" id = "move" value = "up" onclick = "move_up (main_tab) "> <input type =" button "id =" move "value =" down "onclick =" move_down (main_tab) "> <input type =" button "id =" move "value =" Left "onclick =" move_left (main_tab) "> <in Put type = "button" id = "move" value = "right" onclick = "move_right (main_tab)">) <br/> Chinese Character sorting: </P> <select id = "sel_mode" onchange = "charmode = This. selectedindex "> <option> pinyin <br/> </option> <option> strokes <br/> </option> </SELECT> <p> <span style =" cursor: hand; color: red; text-Decoration: underline "onclick =" If (detail. style. display = '') {detail. style. display = 'none'; this. innertext = 'show detail'} else {detail. style. display = ''; This. innertext = 'hide detail'} "> show detail </span> </P> <input type =" text "id =" Monitor "size =" 30 "style =" Width: 300px "> <textarea id =" showcontent "Cols =" 100 "rows =" 20 "> <textarea Cols =" 100 "rows =" 20 "> <br/> main features: </P> <p> Any standard data table (no cross-row or cross-column data) can take effect only by setting the ID! </P> <p> arbitrarily modify or delete the row and column of the editing table </P> <p> Generate a data table </P> <p> new function: sort Chinese characters, drag the table header to swap columns, correct several bugs, and further enhance table independence (you only need to add id = powertable in the table )~~~~~~ </P> <p> if you reference a large page, point the content of the window. onload event to powertable! </P> <p> the writing is a bit messy without writing comments. In fact, at the beginning, I just wanted to practice insertrow ~~~~~ </P> <p> (the related display colors are used, but can be customized using variables) </P> <p>

[Ctrl + A select all Note: To introduce external JS, refresh it before execution]