📄 阿赖网页表格控件应用示例.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://gf.yf163.com/tmp/tc/tc_exam1.htm -->
<HTML><HEAD><TITLE>阿赖网页表格控件应用示例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1476" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<SCRIPT language=javascript src="阿赖网页表格控件应用示例.files/alai_tc.js"></SCRIPT>
<STYLE>P {
MARGIN: 3px; body: font-size:10pt
}
BODY {
FONT-SIZE: 10pt
}
</STYLE>
</HEAD>
<BODY>
<P align=left><FONT size=4><B>阿赖的网页表格控件应用示例：控件参数的使用</B></FONT>
<P align=left>
<P align=left>表格一，ID：table1
<TABLE id=table1 cellSpacing=2 width=555 border=1>
<TBODY>
<TR>
<TD width=62 height=16>1</TD>
<TD width=127 height=16>
<P>monitor</P></TD>
<TD width=109 height=16>广东东莞</TD>
<TD width=92 height=16>
<P>436</P></TD>
<TD width=131 height=16>
<P>04/17/1997</P></TD></TR>
<TR>
<TD width=62 height=17>
<P>2</P></TD>
<TD width=127 height=17>
<P>printer</P></TD>
<TD width=109 height=17>美国加州</TD>
<TD width=92 height=17>
<P>18</P></TD>
<TD width=131 height=17>
<P>02/13/1998</P></TD></TR>
<TR>
<TD width=62 height=16>3</TD>
<TD width=127 height=16>
<P>pc</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>143</P></TD>
<TD width=131 height=16>
<P>01/01/2000</P></TD></TR>
<TR>
<TD width=62 height=16>4</TD>
<TD width=127 height=16>
<P>scaner</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>511</P></TD>
<TD width=131 height=16>
<P>11/19/2000</P></TD></TR>
<TR>
<TD width=62 height=16>5</TD>
<TD width=127 height=16>speaker</TD>
<TD width=109 height=16>香港</TD>
<TD width=92 height=16>
<P>199</P></TD>
<TD width=131 height=16>
<P>09/18/2001</P></TD></TR>
<TR>
<TD width=62 height=16>6</TD>
<TD width=127 height=16>
<P>server</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>97</P></TD>
<TD width=131 height=16>
<P>11/12/2001</P></TD></TR>
<TR>
<TD width=62 height=16>7</TD>
<TD width=127 height=16>hub</TD>
<TD width=109 height=16>新加坡</TD>
<TD width=92 height=16>
<P>47</P></TD>
<TD width=131 height=16>
<P>12/30/2001</P></TD></TR>
<TR>
<TD width=62 height=16>8</TD>
<TD width=127 height=16>note book</TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>698</P></TD>
<TD width=131 height=16>
<P>02/08/2002</P></TD></TR>
<TR>
<TD width=62 height=15>
<P>9</P></TD>
<TD width=127 height=15>
<P>pocket pc</P></TD>
<TD width=109 height=15>香港</TD>
<TD width=92 height=15>
<P>26</P></TD>
<TD width=131 height=15>
<P>11/01/2002</P></TD></TR>
<TR>
<TD width=62 height=16>10</TD>
<TD width=127 height=16>
<P>mic</P></TD>
<TD width=109 height=16>广州</TD>
<TD width=92 height=16>
<P>415</P></TD>
<TD width=131 height=16>
<P>11/27/2002</P></TD></TR>
<TR>
<TD width=62 height=16>11</TD>
<TD width=127 height=16>
<P>net card</P></TD>
<TD width=109 height=16>北京</TD>
<TD width=92 height=16>
<P>794</P></TD>
<TD width=131 height=16>
<P>01/28/2003</P></TD></TR>
<TR>
<TD width=62 height=16>12</TD>
<TD width=127 height=16>
<P>louter</P></TD>
<TD width=109 height=16>加拿大</TD>
<TD width=92 height=16>
<P>442</P></TD>
<TD width=131 height=16>
<P>05/21/2003</P></TD></TR>
<TR>
<TD width=62 height=16>13</TD>
<TD width=127 height=16>
<P>cpu</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>1046</P></TD>
<TD width=131 height=16>
<P>12/17/2003</P></TD></TR></TBODY></TABLE>
<P>控制此表格的程序代码：
<P> <FONT color=#800000>tc1=new alai_tc(table1)</FONT>
<P>说明：这是表格控件最简单的调用，只有一个参数 -- 表格的ID，功能也很简单 -- 点击控件可对表格进行排序。
<P>
<P>表格二，ID：table2
<TABLE id=table2 cellSpacing=2 width=555 border=1>
<TBODY>
<TR>
<TD width=62 height=16>1</TD>
<TD width=127 height=16>
<P>monitor</P></TD>
<TD width=109 height=16>广东东莞</TD>
<TD width=92 height=16>
<P>436</P></TD>
<TD width=131 height=16>
<P>04/17/1997</P></TD></TR>
<TR>
<TD width=62 height=17>
<P>2</P></TD>
<TD width=127 height=17>
<P>printer</P></TD>
<TD width=109 height=17>美国加州</TD>
<TD width=92 height=17>
<P>18</P></TD>
<TD width=131 height=17>
<P>02/13/1998</P></TD></TR>
<TR>
<TD width=62 height=16>3</TD>
<TD width=127 height=16>
<P>pc</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>143</P></TD>
<TD width=131 height=16>
<P>01/01/2000</P></TD></TR>
<TR>
<TD width=62 height=16>4</TD>
<TD width=127 height=16>
<P>scaner</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>511</P></TD>
<TD width=131 height=16>
<P>11/19/2000</P></TD></TR>
<TR>
<TD width=62 height=16>5</TD>
<TD width=127 height=16>speaker</TD>
<TD width=109 height=16>香港</TD>
<TD width=92 height=16>
<P>199</P></TD>
<TD width=131 height=16>
<P>09/18/2001</P></TD></TR>
<TR>
<TD width=62 height=16>6</TD>
<TD width=127 height=16>
<P>server</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>97</P></TD>
<TD width=131 height=16>
<P>11/12/2001</P></TD></TR>
<TR>
<TD width=62 height=16>7</TD>
<TD width=127 height=16>hub</TD>
<TD width=109 height=16>新加坡</TD>
<TD width=92 height=16>
<P>47</P></TD>
<TD width=131 height=16>
<P>12/30/2001</P></TD></TR>
<TR>
<TD width=62 height=16>8</TD>
<TD width=127 height=16>note book</TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>698</P></TD>
<TD width=131 height=16>
<P>02/08/2002</P></TD></TR>
<TR>
<TD width=62 height=15>
<P>9</P></TD>
<TD width=127 height=15>
<P>pocket pc</P></TD>
<TD width=109 height=15>香港</TD>
<TD width=92 height=15>
<P>26</P></TD>
<TD width=131 height=15>
<P>11/01/2002</P></TD></TR>
<TR>
<TD width=62 height=16>10</TD>
<TD width=127 height=16>
<P>mic</P></TD>
<TD width=109 height=16>广州</TD>
<TD width=92 height=16>
<P>415</P></TD>
<TD width=131 height=16>
<P>11/27/2002</P></TD></TR>
<TR>
<TD width=62 height=16>11</TD>
<TD width=127 height=16>
<P>net card</P></TD>
<TD width=109 height=16>北京</TD>
<TD width=92 height=16>
<P>794</P></TD>
<TD width=131 height=16>
<P>01/28/2003</P></TD></TR>
<TR>
<TD width=62 height=16>12</TD>
<TD width=127 height=16>
<P>louter</P></TD>
<TD width=109 height=16>加拿大</TD>
<TD width=92 height=16>
<P>442</P></TD>
<TD width=131 height=16>
<P>05/21/2003</P></TD></TR>
<TR>
<TD width=62 height=16>13</TD>
<TD width=127 height=16>
<P>cpu</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>1046</P></TD>
<TD width=131 height=16>
<P>12/17/2003</P></TD></TR></TBODY></TABLE>
<P>控制此表格的程序代码：
<P><FONT color=#800000>tc2=new
alai_tc(table2,"No|品名|产地|数量|日期","num|char|cnpy|num|date","font-size:9pt;color:blue;","border-collapse:collapse;color:green;border:3
double gray;","border:1 outset;")</FONT>
<P>说明：此例比上例多了几个参数，各个参数的作用分析 --
<P> 参数1：<FONT color=#800000>table2</FONT><FONT color=#800000>
-- </FONT>表格ID；
<P> 参数2：<FONT color=#800000>"No|品名|产地|数量|日期" -- </FONT>标题文字；
<P> 参数3：<FONT color=#800000>"num|char|cnpy|num|date" --
</FONT>数据类型，你可能还不理解数据类型的作用，那么请点击第一个控件和第二个控件，仔细对比一下排序的结果就会发现表格一的1、3、5列排序
结果其实是不正确的，因为缺省的情况下是按字符串（char类型）进行排序的，所以给它指定正确的数据类型后，排序结果才符合要求。第三列cnpy类型表示此列按中文拼音排序，而下面的表格三此列类型设为cnbh，中文笔画排序，请对比一下。
<P> 参数4：<FONT color=#800000>"font-size:9pt;color:blue;" --
</FONT>设置控件样式为字体大小9pt，颜色为兰色。
<P> 参数5：<FONT color=#800000>(代码很长)</FONT><FONT color=#800000>
，</FONT>设置表格的CSS样式。
<P> 参数6：<FONT color=#800000>"border:1 outset;"</FONT> --
设置表格中各个单元格的样式。
<P>
<P>
<P>表格三，ID：table3
<TABLE id=table3 cellSpacing=2 width=555 border=1>
<TBODY>
<TR>
<TD width=62 height=16>1</TD>
<TD width=127 height=16>
<P>monitor</P></TD>
<TD width=109 height=16>广东东莞</TD>
<TD width=92 height=16>
<P>436</P></TD>
<TD width=131 height=16>
<P>04/17/1997</P></TD></TR>
<TR>
<TD width=62 height=17>
<P>2</P></TD>
<TD width=127 height=17>
<P>printer</P></TD>
<TD width=109 height=17>美国加州</TD>
<TD width=92 height=17>
<P>18</P></TD>
<TD width=131 height=17>
<P>02/13/1998</P></TD></TR>
<TR>
<TD width=62 height=16>3</TD>
<TD width=127 height=16>
<P>pc</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>143</P></TD>
<TD width=131 height=16>
<P>01/01/2000</P></TD></TR>
<TR>
<TD width=62 height=16>4</TD>
<TD width=127 height=16>
<P>scaner</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>511</P></TD>
<TD width=131 height=16>
<P>11/19/2000</P></TD></TR>
<TR>
<TD width=62 height=16>5</TD>
<TD width=127 height=16>speaker</TD>
<TD width=109 height=16>香港</TD>
<TD width=92 height=16>
<P>199</P></TD>
<TD width=131 height=16>
<P>09/18/2001</P></TD></TR>
<TR>
<TD width=62 height=16>6</TD>
<TD width=127 height=16>
<P>server</P></TD>
<TD width=109 height=16>台湾</TD>
<TD width=92 height=16>
<P>97</P></TD>
<TD width=131 height=16>
<P>11/12/2001</P></TD></TR>
<TR>
<TD width=62 height=16>7</TD>
<TD width=127 height=16>hub</TD>
<TD width=109 height=16>新加坡</TD>
<TD width=92 height=16>
<P>47</P></TD>
<TD width=131 height=16>
<P>12/30/2001</P></TD></TR>
<TR>
<TD width=62 height=16>8</TD>
<TD width=127 height=16>note book</TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>698</P></TD>
<TD width=131 height=16>
<P>02/08/2002</P></TD></TR>
<TR>
<TD width=62 height=15>
<P>9</P></TD>
<TD width=127 height=15>
<P>pocket pc</P></TD>
<TD width=109 height=15>香港</TD>
<TD width=92 height=15>
<P>26</P></TD>
<TD width=131 height=15>
<P>11/01/2002</P></TD></TR>
<TR>
<TD width=62 height=16>10</TD>
<TD width=127 height=16>
<P>mic</P></TD>
<TD width=109 height=16>广州</TD>
<TD width=92 height=16>
<P>415</P></TD>
<TD width=131 height=16>
<P>11/27/2002</P></TD></TR>
<TR>
<TD width=62 height=16>11</TD>
<TD width=127 height=16>
<P>net card</P></TD>
<TD width=109 height=16>北京</TD>
<TD width=92 height=16>
<P>794</P></TD>
<TD width=131 height=16>
<P>01/28/2003</P></TD></TR>
<TR>
<TD width=62 height=16>12</TD>
<TD width=127 height=16>
<P>louter</P></TD>
<TD width=109 height=16>加拿大</TD>
<TD width=92 height=16>
<P>442</P></TD>
<TD width=131 height=16>
<P>05/21/2003</P></TD></TR>
<TR>
<TD width=62 height=16>13</TD>
<TD width=127 height=16>
<P>cpu</P></TD>
<TD width=109 height=16>美国</TD>
<TD width=92 height=16>
<P>1046</P></TD>
<TD width=131 height=16>
<P>12/17/2003</P></TD></TR></TBODY></TABLE>
<P>控制此表格的程序代码：
<P><FONT color=#800000>tc3=new
alai_tc(table3,"No|品名|产地|数量|日期","num|char|cnbh|num|date","font-size:9pt;color:darkblue;background-color:sandybrown;","border-collapse:collapse;border:0;font-size:9pt;","background-color:lightcyan;|background-color:palegoldenrod;","color:red;|color:darkblue;|color:green;|color:blue;|color:#800000;")</FONT>
<P>说明：此例使用了全部的7个参数，下面主要分析一下最后两个 --
<P> 参数6：<FONT
color=#800000>"background-color:lightcyan;|background-color:palegoldenrod;"</FONT>
-- 设置各表格行的样式，给定两种背景色(用|分隔)交替作用于各行。
<P> <FONT color=#800000> </FONT>参数7：<FONT
color=#800000>"color:red;|color:darkblue;|color:green;|color:blue;|color:#800000;"</FONT>
-- 设置各表格列的样式，为各列设置了不同的字体颜色。
<P>除了颜色，字体、尺寸、边框等都可以设。不要为两个参数设置重叠的样式，这样的结果是只有一个会起作用，例如两个参数都设置了交替背景颜色，参数6将优先起作用，出现交替的行背景色，不会出现交替的列背景色。
<P>
<HR>
<P align=center>copywrite by 赖国欣 2003 All right reserved</P>
<P align=center>Email: <A href="mailto:a@lai.com.cn">a@lai.com.cn</A> website:
<A href="http://www.9499.net/">http://www.9499.net/</A></P>
<SCRIPT language=javascript>
//表格一
tc1=new alai_tc(table1)
//表格二
tc2=new alai_tc(table2,"No|品名|产地|数量|日期","num|char|cnpy|num|date","font-size:9pt;color:blue;","border-collapse:collapse;color:green;border:3 double gray;","border:1 outset;")
//表格三
tc3=new alai_tc(table3,"No|品名|产地|数量|日期","num|char|cnbh|num|date","font-size:9pt;color:darkblue;background-color:sandybrown;","border-collapse:collapse;border:0;font-size:9pt;","background-color:lightcyan;|background-color:palegoldenrod;","color:red;|color:darkblue;|color:green;|color:blue;|color:#800000;")
</SCRIPT>
</BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -