动态表格制作说明书

精品文档精心整理精品文档可编辑的精品文档动态表格制作说明书目录：1、动态表格制作说明书2、表格制作说明动态表格使用说明书动态表格基本介绍：在动态表格中，基本是通过XMLTitle、XMLContents、TOT_ID、SHOWJS四个栏位来实现的。其中1.XMLTitle栏位：XMLTitle栏位中放的是动态表格的表标题、表格栏位的样式、栏位的宽度、栏位内容的检测以及一些动作按钮。例如：“员工转正自我考核表”中，XMLTitle栏位的内容为："工作内容（按重要性顺序排列）,绩效,绩效评为中差的原因分析,^TEXT,RADIO,TEXT,^250,200,200,^y,y,n^,优|良|中|差|,,^不能为空请检查|必须是日期型数据|必须是数字型数据|输入了非法字符|^新增&y|删除&y|修改&y|插入&y|确定&y|取消&y|选择"以“^”为界限，XMLTitle栏位的内容可以分为如下几个参数：第一参数：表格标题，如：“工作内容（按重要性顺序排列）,绩效,绩效评为中差的原因分析”。第二参数：栏位类型，类型的详细说明见后面。如：“TEXT,RADIO,TEXT”第三参数：表格栏位宽度。如：“250,200,200,”第四个参数：是否为空检测。当为“y”时检测，“n”时不检测。如：“y,y,n”第五个参数：辅助参数，根据第二个参数不同有不同的用法，详见类型使用说明第六个参数：提示说明（可以不考虑）。如：“不能为空请检查|必须是日期型数据|必须是数字型数据|输入了非法字符”是对内容进行检测后的提示说明。第七个参数：按钮上的文字定义（可以不考虑）。如：“新增&y|删除&y|修改&y|插入&y|确定&y|取消&y|选择”是一些相关按钮上的文字定义。2.XMLContents栏位:XMLContents栏位是对动态表格的内容进行传值的！当表单提交后，自动将动态表格的内容付给XMLContents，例如将下面动态表格的值传给XMLContents栏位，图（4）XMLContents栏位的内容为：“旺旺三期表单的测试~中~不合格~^动态表格的制作~优~~^”，其中列与列之间的用“~”间隔；行与行之间用“^”间隔；流程走到第二站，在只读状况下动态表格显示为：图（5）3.TOT_ID栏位:TOT_ID栏位是调用XMLTitle栏位的内容！其公式为："[<DIVID='HTMLTitle'></DIV>]"4.SHOWJS栏位:SHOWJS栏位控制动态表格的样式以及显示；在第一站，当要对动态表格进行编辑时，内容为："[<script>"+"varTitleValue=document.all('XMLTitle').value;"+"varXC='XMLContents';"+"varHid='HTMLTitle';"+"varRadioname='F';"+"varsort=true;"+"vartable_width=750;"+"varNoChinese='No';"+"SetHTMLTitle('NULL',Hid,TitleValue,XC,Radioname,sort,table_width,NoChinese);"+"</script>]"当SetHTMLTitle函数的第一个参数为'NULL'时，动态表格为编辑状态，当第一个参数为‘READ’时为编辑状态；’Hid,TitleValue’是调用'HTMLTitle'栏位当中的值；‘XC’是调用'XMLContents'栏位的值；table_width是动态表格的宽度；NoChinese是判断是否显示序号。而SetHTMLTitle函数的函数体在“共用资源”—>档案—>AutoTable.js中。动态表格栏位类型的详细说明1.动态表格栏位的格式有：（第二参数）（1）.TEXT……..…文本格式（2）.RADIO……….单选按钮（3）.COMBOBOX………………..下拉列表框（4）.POPWINDOW……………….弹出Windows窗口（5）.DATE………...日期格式（6）.N………………数字格式（7）.R..…………….文本格式，但不可以编辑（不带值）（8）.P1…………….文本格式，但不可以编辑（带值）（9）.HJ…………….隐藏栏位2.RADIO…单选按钮的配置以“员工转正自我考核表”为例，XMLTitle栏位的第二参数为：“TEXT,RADIO,TEXT,”而与其相对应的第五参数“,优|良|中|差|,,”中的红色部分是单选按钮的内容。单选按钮内容之间以“|”间隔。显示样式如图（2）所示：图（2）COMBOBOX…下拉列表框的配置以“岗位/薪资异动申请单”为例，XMLTitle栏位的第二参数为：“COMBOBOX,POPWINDOW,”而与其相对应的第五参数“签呈|试用期满通知单|员工转正自我考核表|试用/合同期满考核表|员工岗位异动考核表|其它|,,”中的红色部分是下拉列表框的内容。下拉列表框内容之间以“|”间隔。显示样式如图（3）所示：图（3）4.POPWINDOW…弹出窗口的配置以“岗位/薪资异动申请单”为例，XMLTitle栏位的第二参数为：“,POPWINDOW,”而与其相对应的第五参数为空。只需在JS表头里添加一段OpenPopWindow函数，其内容为：functionOpenPopWindow(item,Dis_XMLContents_name,ind){DialogBoxName="SelectForms"ExchangeFields=""screenh='550'screenw='525'field_jSRadioname=itemDialogBox(DialogBoxName,ExchangeFields,screenh,screenw,false);}其中SelectForms为弹出表单的名称，ExchangeFields为返回的值，screenh、screenw为弹出表单的长度跟宽度。显示样式如图（3）所示.5.DATE…日期型的配置以“携眷/携眷变更/取消携眷申请表”为例，其第四标题的内容为日期格式，则XMLTitle栏位的第二参数为：“,,,DATEBR,”,而与其相对应的第五参数为空:“，，，，”。只需在子表单中添加一个DATEBR栏位，另外在DATEBR栏位的onFocus属性里添加一下一段JavaScript代码：“document.all("edtJavaScript_F")[3].value=this.value;”。其显示样式如图（4）所示：图（4）点击按钮弹出如下窗口：6.DATE…多日期型的配置若动态表格的第三、第四列都是日期型的，则XMLTitle栏位的第二参数为：“,,DATEBR,DATEBR1,”,而与其相对应的第五参数为空:“，，，，”。只需在子表单中添加DATEBR和DATEBR1两个栏位。而DATEBR栏位的onFocus属性内容为“document.all("edtJavaScript_F")[2].value=this.value;”。DATEBR1栏位的onFocus属性内容为“document.all("edtJavaScript_F")[3].value=this.value;”。7.栏位的检测防空的检测：若XMLTitle栏位第二参数内的值为TEXT格式，且相对应的第四参数为“y”的情况下，如果栏位值为空，则在表单提交时会自动提示“不能为空请检查”（第六参数的第一个值）。其它错误的检测若XMLTitle栏位第二参数内的值为DATE格式，且相对应的第四参数为“y”的情况下，如果栏位的值不是正确的日期类型，则在表单提交时会自动提示“必须是日期型数据”（第六参数的第二个值）。若XMLTitle栏位第二参数内的值为N（数字）格式，且相对应的第四参数为“y”的情况下，如果栏位的值不是正确的数字类型，则在表单提交时会自动提示“必须是数字型数据”（第六参数的第三个值）。动态表格的计算以“员工绩效考核表”为例，如图所示：项目a1的工作权重乘以考核得分加上a2的工作权重乘以考核得分再加上……….，然后把结果统计在动态表格下面的栏位里。对于上面的计算则要进行一下设置：（1）将XMLTitle栏位第二参数的第二列和第三列置为“N”，如：“TEXT,N,N,TEXT,”。（2）在JS表头里添加下面两段函数：functionhenxiang_calcu(item,Dis_XMLContents_name)///对“工作权重、考核得分”内容的检测{if(Dis_XMLContents_name=="XMLContents"){if((parseFloat(item[1].value)>100)|(parseFloat(item[1].value)<0))///判断值是否在0-100之间{msgBox("工作权重请输入0-100之间的数字",1)returnfalse}if((parseFloat(item[2].value)>100)|(parseFloat(item[2].value)<0))///判断值是否在0-100之间{msgBox("考核得分请输入0-100之间的数字",1)returnfalse}}}functionzhongxiang_calcu(Dis_XMLContents_name)///对动态表格进行统计{if(Dis_XMLContents_name=="XMLContents")///判断当前输入的值与XMLContents是否相等{varTemp_v=document.all(Dis_XMLContents_name).value///若相等则付给Temp_vvara1,a2a1=0a2=0a3=0Temp_v=Temp_v.split("^")//////取出当前一行动态表格的值for(varMM=0;MM<Temp_v.length-1;MM++){varTempi=Temp_v[MM]Tempi=Tempi.split("~")///取出每一个栏位的值付给Tempifor(varj=0;j<Tempi.length-1;j++) {temp_va=Tempi[j] if(!isNaN(temp_va)){if(j==1)///如果是在第二列，则将值付给a1{a1=parseFloat(temp_va) } if(j==2){a2=parseFloat(temp_va)*a1/100///将第三列的值乘以a1/100付给a2(统计一行的值) a3=a3+a2///对每一行的总和进行相加付给a3} } }}document.forms(0).SUMFRACTION.value=a3///将统计和付给SUMFRACTION栏位 }}精品文档精心整理精品文档可编辑的精品文档表格製作說明一般規定：表格需以定義於<table>….</table>間表格內容以『列(row)先行(column)後』的方式依序編寫。表格中的一列需以定義於<tr>….</tr>間，tr為tablerow的縮寫。資料項目需以定義於<td>….</td>間，td為tabledata的縮寫，唯</td>可省略。表格的編碼步驟1、先繪一表格草圖如：甲乙12342.於表格前後，先加上<table>及</table>，如：<table>甲乙1234</table>3.於表格的每一列的前後，先加上<tr>及</tr>，如：<table><tr>甲乙</tr><tr>12</tr><tr>34</tr></table>4.於表格的每一欄位資料的前後，加上<td>及</td>，如：<table><tr><td>甲</td><td>乙</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>5.將框線去除即得<table><tr><td>甲</td><td>乙</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>6.上述之實例表格的實例表格製作說明一.htm

表格框線上例中所顯示的表格無框線，可於<table>內加入border屬性border屬性說明格式：border=數字數字愈大框線愈粗，該選項不寫或數值為0時，表無框線。依瀏覽器的功能可能會有所不同：若【border=數字】不寫，在有底色時，顏色區塊是連續的。若【border=0】，在有底色時，欄位顏色區塊是不連續的(有欄位的格線)。<BODY><tableborder=1><tr><td>甲</td><td>乙</td></tr>..</table></BODY></HTML>border屬性的應用實例表格製作說明2-1.htmborder=1表格製作說明2-2.htmborder=3

表格空白欄之處理因HTML對白空白(whiteblank)的處理方式可以中文之「全型空白」用其提供的空白特殊符號「 」(Non-BlankSPace)，同於資料內有“>”(大於符號)時，需使用「>」(greater)一樣。

表格背景顏色bgcolor屬性說明格式：bgcolor=“顏色名”|”#rrggbb"例如：bgcolor="silver"bgcolor="#ff0000"代表純紅因紅色全用，綠色和藍色無背景顏色屬性可以放在<table><tr><td>標籤內例如：<tablebgcolor="silver">整個表格的背景顏色為銀色，除非<tr><td>有另外指定。<trbgcolor="#ff0000">本例的背景顏色為正紅色，除非<td>有另外指定。<tdbgcolor="blue">本例的背景顏色為藍色，可變更<tr><td>的指定。表格的框線由<table>的bgcolor所決定，無法由<tr>、<td>變更，若要變更可使用DHTML。bgcolor屬性的應用實例<HTML><HEAD><TITLE>表格背景顏色練習一</TITLE></HEAD><BODY><tablebgcolor="silver"border=1><tr><td>甲</td><td>乙</td></tr><trbgcolor="ff0000"><tdbgcolor="blue">1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br></BODY></HTML>表格製作背景顏色說明.htm

表格欄位的長寬border屬性width和height屬性說明格式：width="整數"|"整數%""整數"：表示寬度為"整數"個像素(pixel)點。"整數%"：表示寬度的佔可分配的"整數比率"。以該視窗或框頁所分配到螢幕的大小為100%。height="整數""整數"：表示高度為"整數"個像素(pixel)點。"整數%"：表示高度的佔可分配的"整數比率"。例如：width="100"width="10%"height="20"height="20%"以該視窗或框頁所分配到螢幕的大小（寬、高）為100%。若指明200%，則大小為分配到螢幕大小的2倍。長寬屬性可以放在<table><tr><td>標籤內但同一個行（COLumn）的寬度是相同的，同一個列（ROW）的高度是相同的。例如：<tablewidth="100">整個表格的寬度為100個像素(pixel)點。<tablewidth="100%">整個表格的寬度為可分配的全部。續上例width和height屬性的應用實例下例為一個全畫面的表格（可以隨視窗大小而調變）。其欄位比率分別為20%30%20%50%50%<HTML><HEAD><TITLE>表格的寬和高</TITLE></HEAD><BODY><tablebgcolor="silver"border=1width="100%"height=”100%”><trheight=”20%”><td>甲</td><td> </td><td>乙</td></tr><trheight=”30%”><tdwidth="30%">1</td><tdwidth="20%">x</td><tdwidth="50%">2</td></tr><trheight=”50%”><td>3</td><td> </td><td>4</td></tr></table><br></BODY></HTML>表格製作w-and-h說明.htm

表格跨欄colspan和rowspan屬性說明格式：colspan=“整數”跨行合併：該欄位合併後繼“整數”欄位（同列）。rowspan==“整數”跨列合併：該欄位合併在其下方後繼“整數”欄位（同行）。例如：<tdcolspan=2>和同列後繼欄位合併成一欄（共2格）。<tdrowspan=3>和同行後繼二個欄位合併成一欄（共3格）。<tdrowspan=3colspan=2>和同列後繼欄位及和同行後繼二個欄位合併成一欄（共6格）。屬性的應用實例下列表格姓名性別e-mail<tdcolspan=2><tdrowspan=2>住址<tdcolspan=2>參考表格的編碼步驟編碼的次序由左至右，被合併的欄位不需有任何的標籤。<HTML><HEAD><meta-equiv="content-type"content="text/html;charset=big5"><TITLE>表格的跨欄製作說明</TITLE></HEAD><BODY><tableborder=1><tr><td>姓名</td><tdwidth="60"> </td><td>性別</td><tdwidth="60"> </td></tr><tr><td>e-mail</td><tdcolspan="2"> </