第6章
JavaScript開發中表格與表單技術

◎本章教學微視頻：20個　61分鐘

學習指引

在網頁中，表格和表單都是非常關鍵的應用，表格用來存放數據并布局頁面樣式，表單用于傳輸數據、采集客戶端信息等。本章將詳細介紹JavaScript開發中表格與表單技術，主要內容包括用CSS定制表格樣式、用DOM控制表格、表單的應用、表單元素的應用等。

重點導讀

• 掌握使用CSS定制表格樣式的方法。
• 掌握使用DOM控制表格內容的方法。
• 掌握控制表單元素的方法。
• 掌握設置文本框的方法。
• 掌握設置單選按鈕與復選框的方法。
• 掌握設置下拉菜單的方法。

6.1　用CSS定制表格樣式

使用CSS來設置表格樣式可以極大地改善表格外觀，如可以用CSS來設置表格的顏色、邊框等。

6.1.1　理解表格的相關標簽

表格具有3個最基本的HTML標簽，分別是<table>標簽、<tr>標簽和<td>標簽。<table>標簽用于定義整個表格，<tr>定義一行，<td>定義一個單元格。此外還有兩個標簽應用比較廣泛，分別是<caption>標簽和<th>標簽。<caption>標簽用來設置表格標題，<th>標簽用來設置表頭。

【例6-1】（實例文件：ch06\Chap6.1.html）表格基本標簽應用示例。

相關的代碼示例請參考Chap6.1.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-1所示。

上述代碼中，主要標簽與屬性功能介紹如下。

<table></table>標簽對：用于在HTML文檔中創建表格，標簽中間包含表名和表格本身內容的代碼。表格的基本單元是單元格。

border屬性：用于為每個單元格應用邊框，并用邊框圍繞表格，如果border屬性的值發生改變，那么只有表格周圍邊框的尺寸會發生變化，表格內部的邊框尺寸不變，本例設置圍繞表格的邊框的寬度為1px，若設置border="0"，可以顯示沒有邊框的表格。

summary屬性：用于設置表格內容的摘要，該屬性不會對普通瀏覽器產生任何視覺變化，即在瀏覽頁面時不可見，但該屬性的內容對搜索引擎非常重要。

<caption></caption>標簽對：它用來定義表格的標題，每個表格只能規定一個標題，并且標題會居中顯示在表格上方。

<th></th>標簽對：可以替代<td></td>標簽對，使標簽中的內容加粗并居中顯示，該標簽通常用來設置表格的表頭即表格的第一行，使表格第一行的內容加粗并居中顯示。

<td></td>標簽對：用于定義表格的單元格，該標簽定義一個列并嵌套于<tr></tr>標簽對內，表格的每一行都用<tr>標簽表示并以相應的</tr>標簽結束，多個行結合在一起就構成一個表格。

6.1.2　設置表格的顏色

表格顏色的設置十分簡單，與文字顏色的設置完全一樣，通過color屬性設置表格中文字的顏色，通過background-color屬性設置表格的背景顏色，通過bordercolor屬性設置表格的邊框顏色等。

【例6-2】（實例文件：ch06\Chap6.2.html）設置表格顏色應用示例。

相關的代碼示例請參考Chap6.2.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-2所示。

6.1.3　設置表格的邊框

根據不同的需求，可以對表格或單元格應用不同的邊框，使用CSS中的邊框屬性可以指定邊框的大小、顏色和類型等。該屬性包括border-width、border-style、border-color，具體格式如下：

該條語句融合了寬度border-width、樣式border-style和顏色border-color屬性，但是也可以對這些屬性分別進行單獨定義，具體代碼格式如下：

這段代碼默認表格的上下左右邊框屬性是一樣的，即寬度為2px、樣式為solid、顏色為red。具體屬性值的應用介紹如下。

• border-width屬性：可有具體數值，如1px、2px等是描述性的屬性值。
• border-style屬性：用于設置一個元素邊框的樣式，且必須用于指定可見的邊框，邊框樣式包括solid、dashed、dotted、double、groove、ridge、inset、outset等。
• border-color屬性：該屬性的設置和一般顏色屬性的設置是一樣的。

注意：在border-color前最好先設置border-style，否則border-color可能會不顯示。

在設置表格邊框屬性時，除了將表格作為一個整體進行定義，也可以將表格邊框的4個部分分別進行定義，具體代碼如下：

在設置表格的寬度、樣式和顏色屬性值時可以設置1～4個值，如果給出一個值，它將被運用到表格邊框的各邊上；如果4個值都給出了，它們分別應用于上、右、下和左邊框的式樣；如果2個或3個值給出了，那么省略的值與對邊相等。

【例6-3】（實例文件：ch06\Chap6.3.html）設置表格邊框應用示例。

相關的代碼示例請參考Chap6.3.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-3所示。

在上述例子中，還使用了border-collapse屬性和border-spacing屬性，具體功能介紹如下。

• border-collapse屬性：用來設置表格的邊框是否被合并為一個單一的邊框，該屬性可選值有3個：separate為默認值，表示邊框分開不合并；collapse表示邊框合并，即如果相鄰，則共用同一個邊框；inherit表示從父元素繼承 border-collapse屬性的值。
• border-spacing屬性：用于設置相鄰單元格的邊框間的距離，但僅用于“邊框分離”模式，即當border-collapse屬性值為separate時該屬性才可用。

6.2　用DOM控制表格

DOM的全稱是Document Object Model，即文檔對象模型，它是網站內容與JavaScript互通的接口。在DOM中，所有的HTML元素、屬性和文本都被看成對象，DOM提供了訪問所有這些對象的方法和屬性，并可以通過創建、添加、修改和刪除頁面上的任意元素來重新構建頁面。本節主要介紹如何用DOM來動態地控制表格，包括動態添加表格、修改單元格內容和動態刪除表格。

6.2.1　動態添加表格

利用JavaScript來動態創建表格有兩種方式：一種是使用appendChild()方法；另一種是使用insertRow()方法和insertCell()方法，下面分別進行介紹。

1．appendChild()方法

使用appendChild()方法動態創建表格的代碼如下所示：

從上面的代碼可以看到，用戶先創建了一個tr節點、td節點和一個文本節點，然后將文本節點追加在td節點后，再將td節點追加在tr節點后，最后將tr節點追加在需要添加新行的表格后。

注意：這種動態創建表格的方法是可行的，但是它在IE上運行時，有可能會出現錯誤。

2．insertRow()方法和insertCell()方法。

使用insertRow()方法和insertCell()方法可以快速動態創建表格。insertRow()方法用于在表格中的指定位置插入一個新行。該方法創建一個新的TableRow對象，表示一個新的<tr>標簽，并把它插入表中的指定位置，具體語法為：

index從0開始，該方法表示將新行添加到index所在行之前，如insertRow(0)表示在第一行之前新添加一行，默認的insertRow()函數表示在表的最后新添加一行。一般地，若index等于表中的行數，那么新行將被添加到表的末尾。如下面的代碼，在score表的最后新添加一行：

insertCell()方法在表格的一行的指定位置插入一個空的<td>元素，用法與insertRow()方法一樣。如下面的代碼，在score表新添加的那行的第一列添加一個新的單元格。

注意：insertCell()方法只能插入<td>數據表元。若需要給行添加頭表元，必須用Document. createElement()方法和Node.insertBefore()方法（或相關的方法）創建并插入一個 <th>元素。

例如，在例6.3表格的最后一行新添加一行，姓名為趙六，語文成績為55，數學成績為67。

【例6-4】（實例文件：ch06\Chap6.4.html）DOM動態添加表格行應用示例。

相關的代碼示例請參考Chap6.4.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-4所示。

代碼使用了DOM中的用于訪問指定節點的getElementById()方法和用于創建文本節點的createTextNode()方法，此外還使用了用于指定單元格元素節點后附加節點的appendChild()方法。

下面進行詳細介紹。

• getElementById()方法：該方法屬于DOM中 的訪問指定節點的方法之一。訪問指定節點的含義就是已知節點的某個屬性（如id屬性、name屬性或者節點類型），然后在DOM樹中尋找符合條件的節點，對應的方法有getElementById()、getElementByName()和getElementByTagName()。在HTML文檔中，元素的id屬性是該元素對象的唯一標識，所以getElementById()是最快的節點訪問方法。例如，例6.4中document.getElementById(“score”)語句的作用就是獲取頁面中的id為score的元素節點。
• createTextNode()方法：用于創建一個新的文本節點，該方法一般與appendChild()方法連用，因為創建完一個節點后需要將該節點追加到另一個元素節點后，appendChild方法用于在指定元素節點的最后一個子節點之后添加節點。例如，例6.4中document.createTextNode(“趙六”)語句的作用就是在頁面中創建一個新的文本節點，節點內容為“趙六”。該例子創建了3個新的文本節點，把這3個文本節點賦值給了content數組，最后把用appendChild()方法把content數組附加到了新添加的單元格元素objCell后，從而實現了在表格中動態地添加一行數據的功能。

6.2.2　修改單元格內容

在JavaScript中，要想修改單元格的內容，可以通過設置該單元格的id或者name屬性來獲取對要修改單元格的引用句柄，從而修改單元格內容。

另外，也可以從文檔DOM樹中層層瀏覽獲得要修改單元格的引用句柄。但是為了簡單起見，這里以設置ID的方式實現，然后用innerText或innerHTML設置該單元格的內容。

在實現修改單元格內容功能前，先介紹一下innerHTML屬性和innerText屬性用法上的區別。innerHTML屬性用于設置或者獲取從對象的起始位置到終止位置的全部內容，包括HTML標簽；innerText屬性用于設置或者獲取從對象的起始位置到終止位置的文本，不包括HTML標簽。具體代碼如下：

使用test.innerHTML獲取的值為<div>中的所有內容，包括HTML標簽，即“<span style=”background(-?)color:#FF0000”>test1</span>test2”，test1顯示的背景是紅色的，test2無背景；test.innerText獲取的值只有<div>中的文本test1、test2，test1的背景不受<span>標簽的style屬性的影響，和test2的顯示效果一樣。

例如，要對人員通訊錄中丟失的聯系電話進行“丟失”標注，具體實現如下。

【例6-5】（實例文件：ch06\Chap6.5.html）修改單元格內容。

相關的代碼示例請參考Chap6.5.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-5所示。

提示：代碼使用了Table的rows和cells屬性，來訪問表格的特定單元格，如oTable.rows[3].cells[4]表示表的第3行第4列，即修改了表格的第3行第4列的單元格內容。

6.2.3　動態刪除表格

動態刪除表格需要調用的主要方法是deleteRow()和deleteCell()，這兩種方法的使用語法和對應的添加表格調用方法的使用語法基本一樣，在此不再詳述。如下面的代碼，刪除objTable的第二行。

方法一：確定所要刪除行的索引號，直接刪除。

方法二：不確定所要刪除行的索引號，先根據所要刪除行的ID找到其索引號再刪除。

以上方法都是只刪除表格其中一行的方法，如果要刪除表格其中的幾行，可以給表格每一行添加一列超鏈接，使用戶單擊要刪除的那一行的超鏈接就可以刪除該行，具體實現如下。

【例6-6】（實例文件：ch06\Chap6.6.html）動態刪除表格行。

相關的代碼示例請參考Chap6.6.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-6所示。

單擊delete鏈接，即可刪除當前行，圖6-7所示為刪除“王麗”所在行之后的顯示效果。

在動態刪除表格操作時，很多情況下需要刪除表格的列，由于DOM中沒有自帶的方法可以調用，因此需要自定義一個刪除列的方法。代碼如下：

在上述代碼中，deleteColum()方法帶有兩個參數：一個參數是oTable，代表所要刪除列所屬的表格的id；另一個參數是iNum，代表所要刪除列在其所屬表格中的索引號。該方法通過循環調用deleteCell()方法來刪除表格的一整列。

例如，要在人員通訊錄中刪除“家庭住址”一列。

【例6-7】（實例文件：ch06\Chap6.7.html）動態刪除表格列。

添加用于刪除列的代碼如下：

然后在</table>標簽下添加用于控制刪除列的按鈕代碼信息：

相關的代碼示例請參考Chap6.7.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-8所示。

單擊“刪除家庭住址列”按鈕，即可刪除表格中的預定列，如圖6-9所示。

6.3　控制表單

表單是網頁與用戶交互的橋梁，可以收集用戶的信息和反饋意見，常常用于實現用戶注冊、登錄、投票等功能。

6.3.1　理解表單的相關標簽與表單元素

表單由窗體和控件組成，一個表單一般應該包含用戶填寫信息的輸入框、提交按鈕等，這些輸入框或按鈕叫作控件。表單很像容器，它能夠容納各種各樣的控件。

一個表單用<form></form>標簽對來創建，即定義表單的開始和結束位置，在開始和結束標簽之間的一切定義都屬于表單的內容。<form></form>標簽對具有很多屬性，一些常用的屬性如下。

• id：用于返回表單對象的id。可以通過id屬性的值對表單進行引用。
• name：用于返回表單對象的名稱。可以通過name屬性的值對表單進行引用。
• method：用于說明表單的提交方法?？扇≈礸et()或post()，其中get()為默認方法。
• action：用來定義表單處理程序的位置（相對地址或絕對地址）。
• target：用于說明在何處打開表單。默認值為_self，表示在原頁面打開_blank表示在新窗口打開，

_parent表示在父窗口打開，_top表示在頂級窗口打開，frameName表示在指定窗口打開。

此外，在表單中可以產生的動作只有兩種：提交表單或重置表單。表單對象的方法分別與這兩個動作對應為submit()方法和reset()方法。

• submit()：將表單數據提交給服務器程序處理。如果在表單中定義了submit按鈕，則submit()方法執行后的效果與單擊submit按鈕效果是相同的。
• reset()：將表單中所有元素值重新設置為默認狀態。如果在表單中定義了reset按鈕，那么，reset()方法執行后的效果與單擊reset按鈕的效果是相同的。

【例6-8】（實例文件：ch06\Chap6.8.html）表單的相關標簽與表單元素的應用示例。

相關的代碼示例請參考Chap6.8.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-10所示。

從運行結果中可以看出，該表單里包含了幾個常用表單元素，包括文本框（包括單行文本框text和密碼框password）、單選按鈕radio、下拉列表框select、復選框checkbox以及按鈕button（包括提交按鈕submit和重置按鈕reset）。

6.3.2　用CSS控制表單樣式

使用CSS可以定義表單元素的外觀。下面主要從改變表單元素的字體樣式、邊框樣式和背景顏色出發，討論怎樣將CSS應用到表單中，從而達到美化表單的作用。

例如，需要對例6.8中的表單元素進行美化操作，就可以在代碼中添加CSS樣式進行控制表單樣式。

【例6-9】（實例文件：ch06\Chap6.9.html）用CSS控制表單樣式。

相關的代碼示例請參考Chap6.9.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-11所示。

6.3.3　訪問表單中的元素

采用DOM樹中的定位元素的方法document.getElementById()，可以訪問表單中的元素，如下代碼可以獲取用戶在id為age的下拉列表中的選擇，還可以用document的forms集合，并通過表單在forms集合中的位置或者表單的name來進行引用。

當然，使用這種方法不能在同一個表單中給不同的元素設置相同的name值，如下代碼為在name為form1的表單中，獲取name為user的元素：

或者直接訪問這個元素：

雖然上述這幾種方法都可以訪問到表單中的元素，但比較常用的還是第一種方法，因為頁面中元素的id唯一，用第一種方法來訪問表單中某些元素比較方便，如表單中的單選按鈕。所以一般情況下，訪問表單元素首選document.getElementById()方法。

6.3.4　公共屬性與方法

表單元素具有一些共同屬性和方法，常用的屬性如下。

• id：規定了元素的唯一ID值。
• name：規定了元素的名字。
• type：規定了元素的類型。
• value：定義了元素的值，除下拉菜單外所有元素都具有該屬性。
• checked：聲明了一個單選按鈕或者復選框是否被選中，選中狀態該屬性值為true。

如下HTML代碼為兩個單選按鈕，為了實現兩者只能選其一的效果，只有設置它們的name屬性值相同：

如下JavaScript代碼，調用了表單中的單選按鈕objRadio的checked和value屬性，從而獲取了用戶選中按鈕的值：

常用的一些方法如下。

• blur()：將焦點從該表單元素上移開，其作用與focus()方法相反。
• focus()：將焦點移動到該表單元素上，其作用與blur()方法相反。
• click()：相當于鼠標在表單元素上單擊。
• select()：選中表單元素中可編輯的文本，如文本框。

如要實現在瀏覽器中打開頁面后，光標自動聚焦在表單form1中name為user的元素上，可以使用以下代碼：

6.3.5　提交表單

表單是用來采集用戶數據信息的，采集到的用戶數據信息需要被提交到指定的地點。本節將介紹提交表單的幾種方法。

方法一：使用“提交”按鈕或“圖像”按鈕。

其實，“圖片”按鈕和標準的“提交”按鈕的用法基本相同，只是“圖片”按鈕是用src屬性指定了一張圖片的位置，用這張圖片替代了標準的“提交”按鈕。用戶單擊“提交”按鈕或者“圖片”按鈕時，表單就會被提交，而不需要其他代碼。

方法二：調用JavaScript的方法submit()。

可以通過很多途徑來調用submit()方法，如可以通過一個鏈接或按鈕來調用，單擊該鏈接或按鈕即可提交表單，對于實現表單中單擊不同鏈接或按鈕提交到不同頁面，這種方式非常實用。

如下代碼是通過兩個按鈕調用sumit()方法，從而實現單擊不同按鈕提交表單到不同頁面：

很多情況下，用戶希望填寫完表單可以直接提交而不用使用按鈕或鏈接，這時就可以使用submit()方法，代碼如下：

上述兩種方法的區別是：單擊“提交”按鈕會觸發onsubmit事件，而submit()方法不會觸發該事件，因此在使用第二種方法提交表單時，需要在調用該方法之前完成表單的所有驗證。

6.4　設置文本框

表單中的文本框分為單行文本框、多行文本框和密碼框，它是表單中非常重要的對象，可以讓用戶自己輸入內容。本節就來介紹文本框的一些簡單設置。

6.4.1　控制用戶輸入字符個數

由于數據庫的字段長度是固定的，因此在進行字符輸入時，就要控制字符的個數不能超過字段的長度。單行文本框和密碼框可以通過自身的maxlength屬性來限制用戶輸入字符的個數，如下代碼控制id為user的單行文本框中允許輸入的字符數不超過10：

在多行文本框中沒有maxlength屬性，所以不能使用這種方法來限制輸入的字符數，因此需要自定義這樣的屬性來控制輸入字符的個數。代碼如下所示：

上述代碼自定義了多行文本框的最多允許輸入的字符個數為50，并設置了onkeypress事件的值為自定義的contrlString()函數的返回值，即鍵盤按鍵被按下并釋放一個鍵時會返回contrlString()函數的返回值，如下代碼為JavaScript代碼：

該方法返回當前TextArea中字符的個數與自定義的字符個數的比較結果，如果小于自定義的字符個數則返回true，否則返回false，使用戶不能再輸入字符。

例如，在一個簡單的留言板頁面中，規定了用戶輸入的用戶名不能超過10個字符，留言不能超過20個字符，具體代碼如下：

【例6-10】（實例文件：ch06\Chap6.10.html）控制用戶輸入字符個數。

相關的代碼示例請參考Chap6.10.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-12所示。在輸入字符時，當用戶名的字符數超過10后就不能再輸入字符了，留言框的字符數超過50后也不能再輸入字符了（Enter鍵也算一個字符）。

注意：以上例子控制的都是輸入的英文字符和數字，而不能控制輸入的中文字符或者粘貼來的字符。

6.4.2　設置鼠標經過時自動選擇文本

在很多網頁中，如注冊登錄頁面，經常為了方便用戶操作，使用戶鼠標經過文本框時光標可以立刻停留在該文本框內并可以選中默認值，而無須用戶單擊鼠標。這就需要先設置一個鼠標事件，使鼠標經過時可以自動聚焦，然后設置聚焦后自動選擇文本，具體代碼如下：

以上代碼需要添加在<input>標簽中，如果有很多<input>標簽需要實現鼠標經過時自動選擇文本功能，則需要在每個<input>標簽都添加上述代碼，增加了代碼的冗余，并且代碼修改起來也很麻煩。因此經常會使用JavaScript代碼來完成該功能。

例如，在一個簡單的用戶登錄頁面中，當鼠標經過用戶名文本框或密碼框時會自動聚焦在文本框內，如果文本框內有內容則會自動選擇文本。

【例6-11】（實例文件：ch06\Chap6.11.html）鼠標經過時自動選擇文本。

相關的代碼示例請參考Chap6.11.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-13所示。

從運行結果可以看到，當鼠標移至用戶名文本框上方時，文本框內的內容被選中，而鼠標沒有經過密碼框，因此密碼框內的內容沒有被聚焦也沒用被選中。如果這時將鼠標移至密碼框會看到用戶名文本框內的內容取消了選中狀態，密碼框內的內容變成了選中狀態。這就是鼠標經過文本框時會自動選擇文本。

6.5　設置單選按鈕

單選按鈕用標簽<input type="radio">表示，它主要用于在表單中進行單項選擇，單項選擇的實現是通過對多個單選按鈕設置同樣的name屬性值和不同的選項值。例如，使用兩個單選按鈕，設置這兩個控件的name值均為sex，選項值一個為女，一個為男，從而實現從性別中選擇一個的單選功能。

單選按鈕有一個重要的布爾屬性checked，用來設置或者返回單選按鈕的狀態。一組name值相同的單選按鈕中，如果其中一個按鈕的checked屬性值被設置為true，則其他按鈕的checked屬性值就默認為false。

例如，使用單選按鈕來調查網友對自己工作的滿意度，默認網友的選擇為“比較滿意”，單擊“查看結果”按鈕會彈出一個對話框來顯示網友當前的選擇。

【例6-12】（實例文件：ch06\Chap6.12.html）設置單選按鈕。

相關的代碼示例請參考Chap6.12.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-14所示。從例子中可以看到使用了單選按鈕的name、id和value屬性，幾個按鈕的name屬性值相同，id用于標識該按鈕的唯一性。

提示：在此再簡單介紹<label>標簽的for屬性，該屬性是用來和表單進行關聯，在該例子中，當用戶單擊按鈕旁邊的文字就可以選中按鈕，因為<label>標簽的for屬性把按鈕和標簽關聯在了一起，需要注意的是for屬性的值只能是<label>標簽要關聯的表單元素的id值。

6.6　設置復選框

復選框用標簽<input type="checkbox">表示，它和單選按鈕一樣都是用于在表單中進行選擇，不同的是單選按鈕只能選中一項，而復選框可以同時選中多項。在設計網頁時，常常為了方便用戶使用，會在一組復選框下面添加全選、全不選和反選按鈕。

【例6-13】（實例文件：ch06\Chap6.13.html）設置復選框。

相關的代碼示例請參考Chap6.13.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-15所示。單擊“全選”按鈕，會選中所有的復選框；單擊“全不選”按鈕，所有的復選框都變為未被選中的狀態；單擊“反選”按鈕，所有選中狀態的復選框變為未被選中的狀態，未被選中狀態的復選框變為被選中的狀態。

6.7　設置下拉菜單

下拉菜單是表單中一種比較特殊的元素。一般的表單元素都是由一個標簽表示的，但它必須由兩個標簽<select>和<option>來表示，<select>表示下拉菜單，<option>表示菜單中的選項。另外，除了具有表單元素的公共屬性外，下拉菜單和下拉菜單選項還有一些自己的屬性，一些常用的屬性如下。

• value：指定下拉菜單選項的value值。
• text：指定下拉菜單選項的文本值，即在下拉菜單中顯示的文本值。
• type：指定下拉菜單的類型是單選還是多選。
• selected：聲明選項是否被選中，該屬性值為布爾值。
• selectedIndex：聲明被選中選項的索引。從0開始計數，若選項沒有被選中則該屬性值為-1。
• options：下拉菜單選項option的數組。
• length：下拉菜單選項數組的長度，即下拉菜單選項的個數。

6.7.1　訪問選項

訪問下拉菜單中的選中項是對下拉菜單最重要的操作之一。下拉菜單有兩種類型：單選下拉菜單和多選下拉菜單。

1．單選下拉菜單

訪問單選下拉菜單比較簡單，通過selectedIndex屬性即可訪問。

【例6-14】（實例文件：ch06\Chap6.14.html）訪問簡單的單選下拉菜單選中項。

相關的代碼示例請參考Chap6.14.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-16所示。

單擊單選項右側的下拉按鈕，在彈出的下拉列表中選擇需要的選項，如這里選擇“獅子座”，如圖6-17所示。

單擊“查看結果”按鈕，即可彈出一個信息提示框，提示用戶選中的信息，如圖6-18所示。

2．多選下拉菜單

對于多選下拉菜單來說，通過selectedIndex屬性只能獲得選中項的第一項的索引號，需要先遍歷下拉菜單，這時需要在下拉菜單中選中一項后，按下Ctrl鍵再選擇其他選項即可實現多選。

【例6-15】（實例文件：ch06\Chap6.15.html）訪問多選下拉菜單選中項。

相關的代碼示例請參考Chap6.15.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-19所示。選中第一個選項，然后按下Ctrl鍵，選擇其他的選項，如圖6-20所示。

單擊“查看結果”按鈕，即可彈出一個信息提示框，提示用戶選擇的多個選項，如圖6-21所示。

提示：有時單選下拉菜單和多選下拉菜單會同時出現在同一個頁面表單中，這時為了節省系統資源，可以先通過type屬性來判斷下拉菜單類型，然后根據不同的類型進行不同的方法來獲取選中項的值。

6.7.2　添加選項

有時網站開發者需要根據需求更改下拉菜單中的內容，如添加下拉菜單選項，使用DOM元素中的add()方法可以添加選項。

【例6-16】（實例文件：ch06\Chap6.16.html）添加下拉菜單中的選項。

相關的代碼示例請參考Chap6.16.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-22所示。

單擊“添加《神奇校車》”按鈕，即可在下拉菜單中添加選項，如圖6-23所示。

6.7.3　刪除選項

有時網站開發者需要根據需求更改下拉菜單中的內容，使用DOM元素中的remove()方法可以刪除選項。

【例6-17】（實例文件：ch06\Chap6.17.html）刪除下拉菜單中的選項。

相關的代碼示例請參考Chap6.17.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-24所示。

單擊“刪除《神奇校車》”按鈕，即可刪除下拉菜單中的選項，如圖6-25所示。

6.7.4　替換選項

替換操作可以先添加一個選項，然后把新添加的選項賦值給要替換的選項。使用ReplaceOption()方法可以添加下拉菜單中的選項。

【例6-18】（實例文件：ch06\Chap6.18.html）替換下拉菜單中的選項。

相關的代碼示例請參考Chap6.18.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-26所示。

單擊“國學《千字文》替換為國學《唐詩》”按鈕，即可替換下拉菜單中的選項，如圖6-27所示。

6.8　典型案例——自動提示的文本框

為了提升用戶體驗，開發者需要不斷提升網站性能，盡可能地簡化用戶操作步驟，其中，在設計網頁表單時設置自動提升的文本框就是一個很重要的提升用戶體驗的應用，如在百度搜索框中輸入內容時，會自動提示數據庫中相符合的記錄，簡化了用戶的鍵盤輸入操作。本節將講解如何用JavaScript來實現具有自動提示功能的文本框。

第一步：建立框架結構。

自動提示的文本框需要有一個文本框來顯示用戶鍵盤輸入內容，其次還需要一個框來顯示自動提示的內容，本節實例自動提示框需要實現的功能為：當用戶在文本框中輸入一個漢字時，在提示框中會顯示出在指定位置找到的與之匹配的記錄，從而供用戶選擇。

自動提示文本框的HTML框架如下：

由于匹配框是出現在輸入框下面的，并且有匹配結果時提示框會顯示出來，而未找到匹配結果時提示框要隱藏起來，因此需要使用CSS樣式來設置輸入框和提示框的樣式。具體代碼如下：

相關的代碼示例請參考Chap6.19.html文件，然后雙擊該文件，在IE瀏覽器里面運行的結果如圖6-28所示。

第二步：實現匹配用戶輸入。

在本節實例中，匹配用戶輸入字符功能的實現是使用純粹的JavaScript代碼來實現的，不能實現與服務器端數據庫的連接，所以不能把匹配數據存放在服務器上，而是在JavaScript代碼中預先定義一個數組來存放。代碼如下：

從代碼中可以看到，先定義了4個全局變量（objInput、objDIV、objUl和provinces[]），因為頁面中的幾個函數都要用到這4個變量，其中所有的省份都存放在數組provinces[]中。在findProvince()中調用了setProvince()函數和clear()函數。用戶在文本框中輸入字符后，如果找到了匹配結果就調用setProvince()函數在提示框中顯示提示結果，如果沒找到就調用clear()函數清除提示框。

第三步：顯示提示框。

當用戶在文本框中輸入字符時會觸發onkeyup事件，即調用findProvince()函數在provinces[]中尋找匹配結果，如果找到匹配結果就再調用setProvince()函數，setProvince()函數帶有一個形參results用來存放匹配結果。該函數的代碼如下：

從代碼中可以看到，setProvince()函數找到匹配結果后，會在頁面中創建相應的li節點，把所有匹配結果存放在<li>中，最后再把li節點添加到<ul>中。并且為了提高用戶體驗，還給<li>添加了鼠標事件onmouseover、onmouseout和onclick來控制頁面顯示效果，因此需要添加相應的CSS樣式，代碼如下：

至此，具有自動提示功能的文本框的制作就全部完成了，它的完整代碼如例6.19所示。

【例6-19】（實例文件：ch06\Chap6.19.html）自動提示功能的文本框。

相關的代碼示例請參考Chap6.19.html文件，然后雙擊該文件，在IE瀏覽器里面運行，然后在文本框中輸入城市拼音的第一個字母，即可自動顯示提示信息，如圖6-29所示。

6.9　就業面試技巧與解析

6.9.1　面試技巧與解析（一）

面試官：你對薪資有什么要求？

應聘者：我對工資沒有硬性要求，我受過系統的軟件編程的訓練，不需要進行大量的培訓，而且我本人對編程特別感興趣。因此，我希望公司能根據我的情況和市場標準的水平，給我合理的薪水。

6.9.2　面試技巧與解析（二）

面試官：如果你的工作出現失誤，給本公司造成經濟損失，你認為該怎么辦？

應聘者：我的本意是為公司努力工作，如果造成經濟損失，我認為首要的問題是想方設法去彌補或挽回經濟損失。如果是我的責任，我甘愿受罰；如果是我負責的團隊中別人的失誤，我會幫助同事查找原因總結經驗，從中吸取經驗教訓，并在今后的工作中避免發生同類的錯誤。