當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

表格与表单

發(fā)布時(shí)間：2025/3/19 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了表格与表单小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

動(dòng)態(tài)控制表格：

動(dòng)態(tài)添加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>動(dòng)態(tài)添加</title> <style>  </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>

動(dòng)態(tài)刪除：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>動(dòng)態(tài)刪除</title> <style>  </style> <script language="javascript"> window.onload=function(){var oTable = document.getElementById("member");oTable.deleteRow(2); //刪除一行，后面的行號(hào)自動(dòng)補(bǔ)齊oTable.rows[2].deleteCell(1); //刪除一個(gè)單元格，后面的也自動(dòng)補(bǔ)齊 } </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>

表單基礎(chǔ)：

可以通過(guò)document.form 集合來(lái)引用表單，例如：

document.forms[”myForm“]

其中html部分為：

基本的表單元素：

<!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">請(qǐng)輸入您的姓名:</label><br><input type="text" name="name" id="name"></p> <p><label for="passwd">請(qǐng)輸入您的密碼:</label><br><input type="password" name="passwd" id="passwd"></p> <p><label for="color">請(qǐng)選擇你最喜歡的顏色:</label><br> <select name="color" id="color"><option value="red">紅</option><option value="green">綠</option><option value="blue">藍(lán)</option><option value="yellow">黃</option><option value="cyan">青</option><option value="purple">紫</option> </select></p> <p>請(qǐng)選擇你的性別:<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">上網(wǎng)</label><input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡覺(jué)</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>

文本框：

控制字符個(gè)數(shù)：

單行文本框的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的字符個(gè)數(shù)</title> <style>  </style> <script language="javascript"> function LessThan(oTextArea){//返回文本框字符個(gè)數(shù)是否符號(hào)要求的boolean值return oTextArea.value.length < oTextArea.getAttribute("maxlength"); } </script> </head> <body> <form method="post" name="myForm1" action="addInfo.aspx"> <p><label for="name">請(qǐng)輸入您的姓名:</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>

自動(dòng)選擇文本：

鼠標(biāo)經(jīng)過(guò)時(shí)自動(dòng)聚焦，并選中刪除默認(rèn)值

<!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>  </style> </head> <body> <form method="post" name="myForm1" action="addInfo.aspx"> <p><label for="name">請(qǐng)輸入您的姓名:</label> <input type="text" name="name" id="name" class="txt" value="姓名" οnmοuseοver="this.focus()" οnfοcus="this.select()"></p> <p><label for="passwd">請(qǐng)輸入您的密碼:</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>

轉(zhuǎn)載于:https://www.cnblogs.com/flashweb/archive/2013/01/30/2883462.html

總結(jié)

以上是生活随笔為你收集整理的表格与表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。