JavaScript 动态表格操作示例

动态表格实现代码

<P><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Power Table</title><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><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>国家</TD></TR><TR><TD>Michael</TD><TD>Schumacher</TD><TD>Ferrari</TD><TD>Ferrari</TD><TD>Bridgestone</TD><TD>1.15.872</TD><TD>德国</TD></TR><TR><TD>Rubens</TD><TD>Barrichello</TD><TD>Ferrari</TD><TD>Ferrari</TD><TD>Bridgestone</TD><TD>1.16.760</TD><TD>法国</TD></TR><TR><TD>Ralph</TD><TD>Schumacher</TD><TD>Williams</TD><TD>BMW</TD><TD>Michelin</TD><TD>1.16.297</TD><TD>美国</TD></TR><TR><TD>Juan-Pablo</TD><TD>Montoya</TD><TD>Williams</TD><TD>BMW</TD><TD>Michelin</TD><TD>1.17.123</TD><TD>柬埔寨</TD></TR><TR><TD>David</TD><TD>Coulthard</TD><TD>McLaren</TD><TD>Mercedes</TD><TD>Bridgestone</TD><TD>1.16.423</TD><TD>泰国</TD></TR><TR><TD>Mika</TD><TD>Hakkinen</TD><TD>McLaren</TD><TD>Mercedes</TD><TD>Bridgestone</TD><TD>1.16.979</TD><TD>越南</TD></TR><TR><TD>Jarno</TD><TD>Trulli</TD><TD>Jordan</TD><TD>Honda</TD><TD>Bridgestone</TD><TD>1.16.459</TD><TD>菲律宾</TD></TR><TR><TD>Ricardo</TD><TD>Zonta</TD><TD>Jordan</TD><TD>Honda</TD><TD>Bridgestone</TD><TD>1.17.328</TD><TD>英国</TD></TR><TR><TD>Olivia</TD><TD>Panis</TD><TD>BAR</TD><TD>Honda</TD><TD>Bridgestone</TD><TD>1.16.771</TD><TD>蒙古</TD></TR><TR><TD>Jacques</TD><TD>Villeneuve</TD><TD>BAR</TD><TD>Honda</TD><TD>Bridgestone</TD><TD>1.17.035</TD><TD>马来西亚</TD></TR><TR><TD>Kimi</TD><TD>Raikkonen</TD><TD>Sauber</TD><TD>Petronas</TD><TD>Bridgestone</TD><TD>1.16.875</TD><TD>缅甸</TD></TR><TR><TD>Nick</TD><TD>Heidfeld</TD><TD>Sauber</TD><TD>Petronas</TD><TD>Bridgestone</TD><TD>1.17.165</TD><TD>朝鲜</TD></TR><TR><TD>Eddie</TD><TD>Irvine</TD><TD>Jaguar</TD><TD>Cosworth</TD><TD>Michelin</TD><TD>1.18.016</TD><TD>中国</TD></TR><TR><TD>Pedro</TD><TD>de la Rosa</TD><TD>Jaguar</TD><TD>Cosworth</TD><TD>Michelin</TD><TD>1.18.015</TD><TD>俄罗斯</TD></TR><TR><TD>Hugh</TD><TD>Gengine</TD><TD>Lotus</TD><TD>Renault</TD><TD>Michelin</TD><TD>1.15.015</TD><TD>韩国</TD></TR><TR><TD>Gloria</TD><TD>Slap</TD><TD>Lotus</TD><TD>Renault</TD><TD>Michelin</TD><TD>1.15.012</TD><TD>日本</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)> ( Move: <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)><input type=button id=move value=Right onclick=Move_right(Main_Tab)> )汉字排序：<select id=sel_Mode onchange="charMode=this.selectedIndex"><option>拼音<option>笔画</select><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><div id=detail style="display:none"><input type=text id=monitor size=30 style="width:300px"><textarea id=showContent cols=100 rows=20><&#47textarea><textarea cols=100 rows=20>主要特点：</P>
<P>任意标准数据表格（无跨行和跨列），只要设定 id 即可生效！</P>
<P>任意修改删除编辑表格行列</P>
<P>倒出生成数据表</P>
<P>新加功能：汉字排序、拖动表头交换列、修正几个BUG、进一步增强表格的无关性（只要在 table 中加上 id=PowerTable 即可）~~~~~~</P>
<P>如果在较大的页面中引用，请将 window.onload 事件的内容指向 PowerTable 之后！</P>
<P>写的有点乱，而且没有写注释，其实刚开始的时候仅仅是想实践一下 insertRow ~~~~~</P>
<P>（相关显示颜色操了点，不过可以通过变量定制）<&#47textarea></div></P>

外部脚本引用注意事项

注意：若需引入外部 JavaScript 文件，请在页面加载完成后刷新页面以确保脚本正确执行。