zoukankan      html  css  js  c++  java

  • 表格与表单

    动态控制表格：

    动态添加：

    <!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>
  • 相关阅读:
    SogouCloud.exe进程导致SQL Server服务无法启动
    SQL Server 锁实验（INSERT加锁探究）
    php如何处理大数据高并发
    PHP变量的初始化以及赋值方式介绍
    PHP数组具有的特性有哪些
    PHP中Session ID的实现原理分析
    PHP提高SESSION响应速度的方法有哪些
    PHP中Redis扩展无法加载问题
    关于PHP中依赖注入的详细介绍
    PHP中接口与抽象类的异同点有哪些
  • 原文地址：https://www.cnblogs.com/flashweb/p/2883462.html
Copyright © 2011-2022 走看看