小强的HTML5移动开发之路（31）—— JavaScript回顾6
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的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（33）—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- python3对序列求绝对值
http://www.cnblogs.com/itdyb/p/5731804.html 一开始我是这样写的,据说这样写python2是可以的: myList = [-1,2,-3,4,-5,6 ...
- 00092_字符输出流Writer
1.字符输出流Writer (1)既然有专门用于读取字符的流对象,那么肯定也有写的字符流对象: (2)查阅API,发现有一个Writer类,Writer是写入字符流的抽象类.其中描述了相应的写的动作. ...
- Serializable中的serialVersionUID到底有啥用
最近在研究跨进程通信的问题,于是又再一次研究了,我们熟悉而又陌生的Serializable接口. 那么好,做过Java开发的朋友肯定对这个接口不陌生吧,Java中就是通过这个接口,来实现了序列化和反序 ...
- Day1：字符编码
一.ASCII码 ASCII(American Standard Code for Information Interchange,美国标准信息交换代码),8位,一个字节,最多只能表示255个符号. ...
- uvalive 6393(uva 1572) Self-Assembly 拓扑排序
题意: 给出一些正方形,这些正方形的每一条边都有一个标号.这些标号有两种形式:1.一个大写字母+一个加减号(如:A+, B-, A-......), 2.两个0(如:00):这些正方形能够任意翻转和旋 ...
- NIO 入门（转）
NIO 入门 Greg Travis2003 年 11 月 17 日发布 分享此页面 WeiboGoogle+用电子邮件发送本页面 20 在开始之前 关于本教程 新的输入/输出 (NIO) 库是在 J ...
- Topological Spaces（拓扑空间）
拓扑空间的定义有多种形式,通过 open sets(开集)的形式定义是最为常见的拓扑空间定义形式. 1. 通过开集(open sets)定义 拓扑空间由一个有序对 (X,τ) 表示,X 表示非空集合, ...
- POJ 3086 Triangular Sums （ZOJ 2773)
http://poj.org/problem?id=3086 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1773 让你计算两 ...
- 35、在编译Linux内核中增加程序需要完成以下3项工作
在编译Linux内核中增加程序需要完成以下3项工作: 将编写的源代码拷入Linux内核源代码的相应目录. 在目录的Kconfig文件中增加关于新源代码对应项目的编译配置选项 在目录的Makefile文 ...
- BAPC2014 C&&HUNNU11583:Citadel Construction(几何)
题意: 给出一系列的点,要求寻找最多4个点.使得组成一个面积最大的多边形 思路: 非常显然仅仅有两种情况.要么是三角形,要么是四边形 首先不难想到的是.先要把最外面的点都找出来,事实上就是找凸包 可是 ...