JavaScript 高级程序设计表单跟数据完整性

JavaScript 高级程序设计表单和数据完整性

1. 创建表单是为了满足用户向服务器发送数据的需求。

2. HTML表单是通过<form/>元素定义的，特性如下：
（1）method 浏览器发送GET请求或是POST请求

（2）action 表单所要提交到的地址URL

（3）enctype 想服务器端发送数据时，数据应该使用的编码方法。如果要上传文件，设置成multipart/form-data

（4）accept 当上传文件时，列出服务器能正确处理的mime类型。

（5）accept-charset 当提交数据时，列出服务器接受的字符编码

3. 文本框事件：

change 当用户更改内容后文本框失去焦点时发生 blur失去焦点就触发

select 当一个或多个字符被选中时发生

如果文本不变，但文本框失去焦点，那么只有blur事件被触发；如果文本发生变化，则先触发change事件，在触发blur事件

4. 列表框和组合框

<option value="1">18-21</option> value用来确定控件所有可能的值，所选的选项可将它的value指定

<option value="2">22-25</option> 给控件，发送到服务器。

</select>

5. 对单列表格进行排序

    <html>
	<head>
        <title></title>
        <script language="javascript" type="text/javascript">        
            function sortTable(sTableID)
            {
                var oTable=document.getElementById("tblSort");
                var oTBody=oTable.tBodies[0];
                var colDataRows=oTBody.rows;    //rows是个DOM集合，并非数组，不能用sort()方法。
                var aTRs=new Array;                
                for(var i=0;i<colDataRows.length;i++){
                    aTRs.push(colDataRows[i]);
                }
                
                aTRs.sort(compareTRs);
                
                var oFragment=document.createDocumentFragment();
                for(var i=0;i<aTRs.length;i++){
                    oFragment.appendChild(aTRs[i]);
                }
                oTBody.appendChild(oFragment);               
            
            }
            function compareTRs(oTR1,oTR2)
            {
                var sValue1=oTR1.cells[0].firstChild.nodeValue;
                var sValue2=oTR2.cells[0].firstChild.nodeValue;
                
                return sValue1.localeCompare(sValue2);
            }
       </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="sortTable(tblSort)">        
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                </tr>
                <tr>
                    <td>Williams</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                </tr>
                <tr>
                    <td>Walker</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

6. 对多列表格进行排序

<html>
    <head>
        <title></title>
        <script language="javascript" type="text/javascript">        
            function sortTable(sTableID,iCol)
            {
                var oTable=document.getElementById(sTableID);
                var oTBody=oTable.tBodies[0];
                var colDataRows=oTBody.rows;    //rows是个DOM集合，并非数组，不能用sort()方法。
                var aTRs=new Array;                
                for(var i=0;i<colDataRows.length;i++){
                    aTRs[i]=colDataRows[i];
                }                
                aTRs.sort(generateCompareTRs(iCol));
                
                var oFragment=document.createDocumentFragment();
                for(var i=0;i<aTRs.length;i++){
                    oFragment.appendChild(aTRs[i]);
                }
                oTBody.appendChild(oFragment);         
            }
            function generateCompareTRs(iCol)
            {
                return function compareTRs(oTR1,oTR2)
                        {
                            var sValue1=oTR1.cells[iCol].firstChild.nodeValue;
                            var sValue2=oTR2.cells[iCol].firstChild.nodeValue;
                
                            return sValue1.localeCompare(sValue2);
                        }
            }
            
       </script>
    </head>
    <body>
               
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th onclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th>
                    <th onclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

JavaScript 高级程序设计 表单跟数据完整性

相关推荐

JavaScript 高级程序设计表单跟数据完整性