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

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="width: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="width:120px;" onchange="change(this.selectedIndex);">

			<!-- this表示绑定该事件的节点,在这里表示<select>节点-->

			<option value="-1">--专业--</option>

			<option value="english">英语</option>

			<option value="computer">计算机</option>

		</select>

		<select id="s2" style="width: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是TableCell

delecteCell(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>

小强的HTML5移动开发之路（31）—— JavaScript回顾6的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（33）—— jqMobi基础

    一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...

  8. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  9. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

  1. sql基础知识集锦

    Sql常用语法 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT ...

  2. UVA 11800 - Determine the Shape 几何

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  3. 毕业两年做到测试经理的经历总结- 各个端的自动化，性能测试结合项目具体场景实战，分析客户反馈的Bug

    前言 最近看到行业的前辈都分享一些过往的经历来指导我们这些测试人员,我很尊敬我们的行业前辈,没有他们在前面铺路,如今我们这帮年轻的测试人估计还在碰壁或摸着石头过河,结合前辈们的经验,作为年轻的测试人也 ...

  4. 【Codeforces Round #299 (Div. 2) B】Tavas and SaDDas

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次取出最小的数字,在后面加上一个4或一个7就好; 会发现最后的数字很少的. [代码] #include <bits/stdc ...

  5. softmax 与 sigmoid & softmax名字的由来

    Softmax回归模型,该模型是logistic回归模型在多分类问题上的推广. 参考:http://blog.csdn.net/u014422406/article/details/52805924 ...

  6. (6)uboot具体解释——关闭缓存和mmu

    uboot具体解释--关闭缓存和mmu 当设置完时钟分频以后,uboot就会运行cpu_init_crit汇编函数,这个函数的主要作用就是关闭缓存和mmu.然后调用lowlevel_init函数进行系 ...

  7. Redis学习笔记（六）---List

    1.ArrayList与LinkList的区别 ArrayList的使用数组存入的方式,所以根据索引查询数据速度快,而增删元素是比较慢的,它需要将数据一位一位的移动,知道达到要求. LinkList使 ...

  8. [慕课笔记] node+mongodb建站攻略

    如何利用node+mongodb来快速搭建一个电影网站? 一:后端部分 整个网站的后端是由node.js来驱动的,所以在后端需要安装node.js,以及在这个基础之上的框架express,它能够帮助我 ...

  9. 【BZOJ 4516】生成魔咒

    [链接]h在这里写链接 [题意]     [Description]         给你n(n<=10^9)个数字,把它们依次,一个一个地添加在空串S的后面.         要求每添加一次之 ...

  10. NIO 入门（转）

    NIO 入门 Greg Travis2003 年 11 月 17 日发布 分享此页面 WeiboGoogle+用电子邮件发送本页面 20 在开始之前 关于本教程 新的输入/输出 (NIO) 库是在 J ...