第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：用于说明表单的提交方法。可取值get()或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　面试技巧与解析（二）

面试官：如果你的工作出现失误，给本公司造成经济损失，你认为该怎么办？

应聘者：我的本意是为公司努力工作，如果造成经济损失，我认为首要的问题是想方设法去弥补或挽回经济损失。如果是我的责任，我甘愿受罚；如果是我负责的团队中别人的失误，我会帮助同事查找原因总结经验，从中吸取经验教训，并在今后的工作中避免发生同类的错误。