现在的位置: 首页 > 综合 > 正文

JavaScript回顾(6)

2018年05月20日 ⁄ 综合 ⁄ 共 4510字 ⁄ 字号 小 中 大 ⁄ 评论关闭

HTML DOM模型： w3c dom 模型(规范)出现之前，各个浏览器自己支持的一些dom操作

Select对象

属性：

selectedIndex:表示用户现在选择的那个选项的下标(从0开始)

length:获取或者设置选项的长度

options:值是一个数组，每个数组元素是option对象，表示下拉列表的所有选项

Option对象

属性：

text:选项的描述

value:选项的值

selected:当值为ture时，表示这个选项被用户选中

可以按照如下方式创建Option对象

var obj = new Option(text, value);

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f1(){  
  5.                 //alert($('s1').selectedIndex);  
  6.                 //alert($('s1').length);  
  7. var ojb = document.getElmentById("s1");
  8.                 var arr = obj.options;  
  9.                 for(i=0;i<arr.length;i++){  
  10.                     alert(arr[i].text +'   '+ arr[i].value);  
  11.                 }  
  12.             }  
  13.             function f2(){   
  14. var
    ojb = document.getElmentById("s1");             
  15.                 var op = new Option('武汉','wh');  
  16.                 obj.options[obj.options.length] = op;  
  17.             }  
  18.         </script>  
  19.     </head>  
  20.     <body>  
  21.         <select id="s1" style="width:120px;" name="s1">  
  22.             <option value="bj">北京</option>  
  23.             <option value="sh">上海</option>  
  24.             <option value="xa">西安</option>  
  25.             <option value="sz">深圳</option>  
  26.             <option value="tj">天津</option>  
  27.         </select>  
  28.         <input type="button" value="点我吧" onclick="f2();"/>  
  29.     </body>  
  30. </html>   

级联下拉列表

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             var arr = new Array();  
  5.             arr[0] = [new Option('--方向--','-1')];  
  6.             arr[1] = [new Option('商务英语','en1'),  
  7.                 new Option('专业英语','en2')];  
  8.             arr[2] = [new Option('计算机软件','comp1'),  
  9.                 new Option('计算机网络','comp2'),  
  10.                 new Option('计算机应用','comp3')];  
  11.             //数组的创建放在外面执行效率更高  
  12.             function change(index){  
  13. var obj = document.getElementById("s2");
  14.                 obj.length = 0;  
  15.                 for(i=0;i<arr[index].length;i++){  
  16.                     obj.options[i] = arr[index][i];  
  17.                 }  
  18.             }  
  19.         </script>  
  20.     </head>  
  21.     <body>  
  22.         <select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">  
  23.             <!-- this表示绑定该事件的节点,在这里表示<select>节点-->  
  24.             <option value="-1">--专业--</option>  
  25.             <option value="english">英语</option>  
  26.             <option value="computer">计算机</option>  
  27.         </select>  
  28.         <select id="s2" style="width:120px;">  
  29.             <option value="-1">--方向--</option>  
  30.         </select>  
  31.     </body>  
  32. </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是TableCell

delecteCell(index):删除一个单元格

TableCell对象  相当于<td>

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             //html dom模型做  
  5.             function addRow1(){  
  6. varr obj = document.getElmentById("t1");
  7.                 var tr =
    obj.insertRow(obj.rows.length);      
  8.                 var td1 = tr.insertCell(tr.cells.length);  
  9.                 var td2 = tr.insertCell(tr.cells.length);  
  10.                 td1.innerHTML = document.getElementById('name').value;  
  11.                 td2.innerHTML =
    document.getElementById('salary').value;  
  12.                 //tr.style.backgroundColor = 'red';   //两种样式1  
  13.                 //tr.className = 'selected';          //两种样式2  
  14.                 obj.rows[1].cells[1].style.backgroundColor = 'red';//把某一格加亮  
  15.             }  
  16.             //采用w3c dom模型做  
  17.             function addRow2(){  
  18. varr
    obj = document.getElmentById("t1");
  19.                 var tr1 = document.createElement('tr');  
  20.                 var td1 = document.createElement('td');  
  21.                 var td2 = document.createElement('td');  
  22.                 td1.innerHTML = $('name').value;  
  23.                 td2.innerHTML = $('salary').value;  
  24.                 tr1.appendChild(td1);  
  25.                 tr1.appendChild(td2);  
  26.                 obj.appendChild(tr1);  
  27.             }  
  28.         </script>  
  29.         <style>  
  30.             .selected{  
  31.                 background-color:red;  
  32.             }  
  33.         </style>  
  34.     </head>  
  35.     <body>  
  36.         <table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%">  
  37.             <tr><td>姓名</td><td>工资</td></tr>  
  38.             <tr><td>zs</td><td>2000</td></tr>  
  39.             <tr><td>ls</td><td>3000</td></tr>  
  40.             <tr><td>wu</td><td>4000</td></tr>  
  41.         </table><br/>  
  42.         姓名：<input type="text" name="name" id="name"/>  
  43.         工资：<input type="text" name="salary" id="salary"/>  
  44.         <input type="button" value="添加" onclick="addRow2();"/>  
  45.     </body>  
  46. </html>   
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞