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事件
<input type="text" ?id="txt1" value="xxxx" onblur="alert('blur')" onchange="alert('change')"> <br />
?
4. ?列表框和组合框
?
<select id="selAge" name="selAge" size="3">
?? ? ? ? ? ?<option value="1">18-21</option> ? ?value用来确定控件所有可能的值，所选的选项可将它的value指定
?? ? ? ? ? ?<option value="2">22-25</option>给控件，发送到服务器。
?? ? ? ? ? ?<option value="3">26-29</option>
?? ? ? ? ? ?<option value="4">30-35</option>
?? ? ? ? ? ?<option value="5">Over</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>