<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西门原创XTable演示demo</title>
<script src="xtable.js"></script>
<style type="text/css">
<!--
.STYLE1 {color: #0000FF}
-->
</style>
</head>
<script>
function aa()
{
var a=new XTable("ximen");
a.addrow("west","北极星","<input type=button onclick='alert(\"可以加入html元素滴\")' value=西门>","逸凡");
}
function bb()
{
var a=new XTable("ximen");
a.delrow("west");
}
function cc()
{
var a=new XTable("ximen");
a.delrowi(2);
}
function dd()
{
var a=new XTable("ximen");
a.addrow("ididid","北极星","<input type=button onclick='alert(\"可以加入html元素滴\")' value=西门>","逸凡","无情");
}
function ee()
{
var a=new XTable("ximen");
a.clear();
}
function ff()
{
var a=new XTable("ximen");
for(var i=0;i<30;i++)
a.addrow("trt"+i,"yahoo888","<input type=button value=miklic>","longxinhe");
}
</script>
<style>
.ss
{
width:155px;
background-color:#CCCCCC;
color:#0000FF;
height:150px;
}
</style>
<body>
<table width="950" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FFFFCC">
<td colspan="6">西门原创演示XTable类的页面。XTable类是对table操作的一个js封装， 通过封装的内部方法，可以轻松的对表格进行添加，删除等操作，此为beat1.0小样板。本演示页面内放有一个id为ximen的三行散列的table。</td>
</tr>
<tr>
<td><input type="button" onclick="aa()" value="增加一个id为west的TR" > </td>
<td><input type="button" onclick="bb()" value="删除指定id的TR" > </td>
<td><input type="button" onclick="cc()" value="删除表格的第2行" > </td>
<td><input type="button" onclick="dd()" value="插入不一致的列" > </td>
<td><input type="button" onclick="ee()" value="清空" > </td>
<td><input type="button" onclick="ff()" value="一次加入30行，测试性能" > </td>
</tr>
<tr>
<td class="ss"><br />
a.addrow("west","数据1","<input type=button value=html元素>","sad");<br /></td>
<td class="ss"><br />
a.delrow("west");<br /></td>
<td class="ss"><br />
a.delrowi(2);<br /></td>
<td class="ss"><br />
a.addrow("ididid","北极星","<input type=button onclick='alert(\"可以加入html元素滴\")' value=西门>","逸凡","无情");<br /></td>
<td bgcolor="#FFFFCC" class="ss"><br />
a.clear();<br /></td>
<td class="ss"><br />
for(var i=0;i<30;i++)<br />
a.addrow("trt"+i,"yahoo888","<input type=button value=miklic>","longxinhe");<br /></td>
</tr>
<tr>
<td colspan="6"><div align="center">初始化的时候只需 <span class="STYLE1">var a=new XTable("table的id")</span>即可</div></td>
</tr>
</table>
<br />
<div style=" margin:10px; background-color:#BBD5EE; text-align:center; padding:5px;">
<table width="600" border="1" cellspacing="0" cellpadding="0" id="ximen" bordercolor="#000000">
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>
</table>
</div>
<p> </p>
<div style=" margin:10px; background-color:#BBD5EE; text-align:center; padding:5px;">
<p>此类只是beat1.0小样版，发布出来大家提点意见。过后考虑加入其他复杂应用。例如更新单元格。ajax异步通信。</p>
<p>使用json格式与后台交互动态添加行列 等等其他功能……</p>
<p>大家有什么意见欢迎提出。</p>
<p>邮箱:<a href="mailto:westdoorking@163.com">westdoorking@163.com</a></p>
<p>我的个人Blog--<a href="http://www.163sd.com">http://www.163sd.com</a></p>
</div>
</body>
</html>
