表格与表单
动态控制表格：
动态添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>动态添加</title> <style> <!-- .datalist{ border:1px solid #0058a3; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px; } .datalist caption{ padding-bottom:5px; font:bold 1.4em; text-align:left; } .datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } .datalist tr:hover, .datalist tr.altrow{ background-color:#c4e4ff; /* 动态变色 */ } --> </style> <script language="javascript"> window.onload=function(){ var oTr = document.getElementById("member").insertRow(2); //插入一行 var aText = new Array(); aText[0] = document.createTextNode("fresheggs"); aText[1] = document.createTextNode("W610"); aText[2] = document.createTextNode("Nov 5th"); aText[3] = document.createTextNode("Scorpio"); aText[4] = document.createTextNode("1038818"); for(var i=0;i<aText.length;i++){ var oTd = oTr.insertCell(i); oTd.appendChild(aText[i]); } } </script> </head> <body> <table class="datalist" summary="list of members in EE Studay" id="member"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr> <td>girlwing</td> <td>W210</td> <td>Sep 16th</td> <td>Virgo</td> <td>1307994</td> </tr> <tr> <td>tastestory</td> <td>W15</td> <td>Nov 29th</td> <td>Sagittarius</td> <td>1095245</td> </tr> <tr> <td>lovehate</td> <td>W47</td> <td>Sep 5th</td> <td>Virgo</td> <td>6098017</td> </tr> <tr> <td>slepox</td> <td>W19</td> <td>Nov 18th</td> <td>Scorpio</td> <td>0658635</td> </tr> <tr> <td>smartlau</td> <td>W19</td> <td>Dec 30th</td> <td>Capricorn</td> <td>0006621</td> </tr> <tr> <td>whaler</td> <td>W19</td> <td>Jan 18th</td> <td>Capricorn</td> <td>1851918</td> </tr> <tr> <td>shenhuanyan</td> <td>W25</td> <td>Jan 31th</td> <td>Aquarius</td> <td>0621827</td> </tr> <tr> <td>tuonene</td> <td>W210</td> <td>Nov 26th</td> <td>Sagittarius</td> <td>0091704</td> </tr> <tr> <td>ArthurRivers</td> <td>W91</td> <td>Feb 26th</td> <td>Pisces</td> <td>0468357</td> </tr> <tr> <td>reconzansp</td> <td>W09</td> <td>Oct 13th</td> <td>Libra</td> <td>3643041</td> </tr> <tr> <td>linear</td> <td>W86</td> <td>Aug 18th</td> <td>Leo</td> <td>6398341</td> </tr> <tr> <td>laopiao</td> <td>W41</td> <td>May 17th</td> <td>Taurus</td> <td>1254004</td> </tr> <tr> <td>dovecho</td> <td>W19</td> <td>Dec 9th</td> <td>Sagittarius</td> <td>1892013</td> </tr> <tr> <td>shanghen</td> <td>W42</td> <td>May 24th</td> <td>Gemini</td> <td>1544254</td> </tr> <tr> <td>venessawj</td> <td>W45</td> <td>Apr 1st</td> <td>Aries</td> <td>1523753</td> </tr> <tr> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr> </table> </body> </html>
动态删除：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>动态删除</title> <style> <!-- .datalist{ border:1px solid #0058a3; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px; } .datalist caption{ padding-bottom:5px; font:bold 1.4em; text-align:left; } .datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } .datalist tr:hover, .datalist tr.altrow{ background-color:#c4e4ff; /* 动态变色 */ } --> </style> <script language="javascript"> window.onload=function(){ var oTable = document.getElementById("member"); oTable.deleteRow(2); //删除一行，后面的行号自动补齐 oTable.rows[2].deleteCell(1); //删除一个单元格，后面的也自动补齐 } </script> </head> <body> <table class="datalist" summary="list of members in EE Studay" id="member"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr> <td>girlwing</td> <td>W210</td> <td>Sep 16th</td> <td>Virgo</td> <td>1307994</td> </tr> <tr> <td>tastestory</td> <td>W15</td> <td>Nov 29th</td> <td>Sagittarius</td> <td>1095245</td> </tr> <tr> <td>lovehate</td> <td>W47</td> <td>Sep 5th</td> <td>Virgo</td> <td>6098017</td> </tr> <tr> <td>slepox</td> <td>W19</td> <td>Nov 18th</td> <td>Scorpio</td> <td>0658635</td> </tr> <tr> <td>smartlau</td> <td>W19</td> <td>Dec 30th</td> <td>Capricorn</td> <td>0006621</td> </tr> <tr> <td>whaler</td> <td>W19</td> <td>Jan 18th</td> <td>Capricorn</td> <td>1851918</td> </tr> <tr> <td>shenhuanyan</td> <td>W25</td> <td>Jan 31th</td> <td>Aquarius</td> <td>0621827</td> </tr> <tr> <td>tuonene</td> <td>W210</td> <td>Nov 26th</td> <td>Sagittarius</td> <td>0091704</td> </tr> <tr> <td>ArthurRivers</td> <td>W91</td> <td>Feb 26th</td> <td>Pisces</td> <td>0468357</td> </tr> <tr> <td>reconzansp</td> <td>W09</td> <td>Oct 13th</td> <td>Libra</td> <td>3643041</td> </tr> <tr> <td>linear</td> <td>W86</td> <td>Aug 18th</td> <td>Leo</td> <td>6398341</td> </tr> <tr> <td>laopiao</td> <td>W41</td> <td>May 17th</td> <td>Taurus</td> <td>1254004</td> </tr> <tr> <td>dovecho</td> <td>W19</td> <td>Dec 9th</td> <td>Sagittarius</td> <td>1892013</td> </tr> <tr> <td>shanghen</td> <td>W42</td> <td>May 24th</td> <td>Gemini</td> <td>1544254</td> </tr> <tr> <td>venessawj</td> <td>W45</td> <td>Apr 1st</td> <td>Aries</td> <td>1523753</td> </tr> <tr> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr> </table> </body> </html>
表单基础：
可以通过document.form 集合来引用表单，例如：
document.forms[”myForm“]
其中html部分为：
<form method="post" name="myForm" action="addInfo.aspx">
基本的表单元素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Form Example</title> </head> <body> <form method="post" name="myForm1" action="addInfo.aspx"> <p><label for="name">请输入您的姓名:</label><br><input type="text" name="name" id="name"></p> <p><label for="passwd">请输入您的密码:</label><br><input type="password" name="passwd" id="passwd"></p> <p><label for="color">请选择你最喜欢的颜色:</label><br> <select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p> <p>请选择你的性别:<br> <input type="radio" name="sex" id="male" value="male"><label for="male">男</label><br> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p> <p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label> <input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label> <input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p> <p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"> <input type="reset" name="btnReset" id="btnReset" value="Reset"></p> </form> </body> </html>
文本框：
控制字符个数：
单行文本框的maxlength属性
textarea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>控制textarea的字符个数</title> <style> <!-- form{ padding:0px; margin:0px; font:14px Arial; } input.txt{ /* 文本框单独设置 */ border: 1px inset #00008B; background-color: #ADD8E6; } input.btn{ /* 按钮单独设置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px; } --> </style> <script language="javascript"> function LessThan(oTextArea){ //返回文本框字符个数是否符号要求的boolean值 return oTextArea.value.length < oTextArea.getAttribute("maxlength"); } </script> </head> <body> <form method="post" name="myForm1" action="addInfo.aspx"> <p><label for="name">请输入您的姓名:</label> <input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p> <p><label for="comments">我要留言:</label><br> <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"> <input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p> </form> </body> </html>
自动选择文本：
鼠标经过时自动聚焦，并选中删除默认值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Automatic Selecting</title> <style> <!-- form{ padding:0px; margin:0px; font:14px Arial; } input.txt{ border: 1px inset #00008B; background-color: #ADD8E6; } input.btn{ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px; } --> </style> </head> <body> <form method="post" name="myForm1" action="addInfo.aspx"> <p><label for="name">请输入您的姓名:</label> <input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()"></p> <p><label for="passwd">请输入您的密码:</label> <input type="password" name="passwd" id="passwd" class="txt"></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"> <input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p> </form> </body> </html>
