Select对象
属性：selectedIndex:表示用户现在选择的那个选项的下标(从0开始)length:获取或者设置选项的长度options:值是一个数组，每个数组元素是option对象，表示下拉列表的所有选项
Option对象
属性：text:选项的描述value:选项的值selected:当值为ture时，表示这个选项被用户选中可以按照如下方式创建Option对象var obj = new Option(text, value);
<html> <head> <script src="myjs.js"></script> <script> function f1(){ //alert($('s1').selectedIndex); //alert($('s1').length); var arr = $('s1').options; for(i=0;i<arr.length;i++){ alert(arr[i].text +' '+ arr[i].value); } } function f2(){ var op = new Option('武汉','wh'); $('s1').options[$('s1').options.length] = op; } </script> </head> <body> <select id="s1" style="120px;" name="s1"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="xa">西安</option> <option value="sz">深圳</option> <option value="tj">天津</option> </select> <input type="button" value="点我吧" onclick="f2();"/> </body> </html>级联下拉列表
<html> <head> <script src="myjs.js"></script> <script> var arr = new Array(); arr[0] = [new Option('--方向--','-1')]; arr[1] = [new Option('商务英语','en1'), new Option('专业英语','en2')]; arr[2] = [new Option('计算机软件','comp1'), new Option('计算机网络','comp2'), new Option('计算机应用','comp3')]; //数组的创建放在外面执行效率更高 function change(index){ $('s2').length = 0; for(i=0;i<arr[index].length;i++){ $('s2').options[i] = arr[index][i]; } } </script> </head> <body> <select id="s1" style="120px;" onchange="change(this.selectedIndex);"> <!-- this表示绑定该事件的节点,在这里表示<select>节点--> <option value="-1">--专业--</option> <option value="english">英语</option> <option value="computer">计算机</option> </select> <select id="s2" style="120px;"> <option value="-1">--方向--</option> </select> </body> </html>Table对象 相当于<table>
属性：tHead:返回tHead对象tFoot:返回tFoot对象tBody:返回tBody对象数组rows:返回表格所有的行，TableRow数组方法：var obj = insertRow(index):在index处插入一行,返回的obj是TableRow对象(下标从0开始)deleteRow(index):删除index处的一行
TableRow对象 相当于<tr>
属性：cells：表示所有单元格的一个数组(TableCell对象)方法：var obj = insertCell(index); 在index处插入一个单元格，返回obj是TableCelldelecteCell(index):删除一个单元格TableCell对象 相当于<td>
<html> <head> <script src="myjs.js"></script> <script> //html dom模型做 function addRow1(){ var tr = $('t1').insertRow($('t1').rows.length); var td1 = tr.insertCell(tr.cells.length); var td2 = tr.insertCell(tr.cells.length); td1.innerHTML = $('name').value; td2.innerHTML = $('salary').value; //tr.style.backgroundColor = 'red'; //两种样式1 //tr.className = 'selected'; //两种样式2 $('t1').rows[1].cells[1].style.backgroundColor = 'red';//把某一格加亮 } //采用w3c dom模型做 function addRow2(){ var tr1 = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td'); td1.innerHTML = $('name').value; td2.innerHTML = $('salary').value; tr1.appendChild(td1); tr1.appendChild(td2); $('t1').appendChild(tr1); } </script> <style> .selected{ background-color:red; } </style> </head> <body> <table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%"> <tr><td>姓名</td><td>工资</td></tr> <tr><td>zs</td><td>2000</td></tr> <tr><td>ls</td><td>3000</td></tr> <tr><td>wu</td><td>4000</td></tr> </table><br/> 姓名：<input type="text" name="name" id="name"/> 工资：<input type="text" name="salary" id="salary"/> <input type="button" value="添加" onclick="addRow2();"/> </body> </html>