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>
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
里面有小强开发板程序,对初学者有很大帮助
HTML、CSS、JavaScript网页制作从入门到精通
小强老师软件测试基础课程5-软件质量基础知识
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强多个模版替换 快速发布信息,让你的工作更有效率。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
小强通话时间统计,显示归属地,统计指定号码通话时间
小强升职记 实现目标思维导图
ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip
TinyButStrong version 2.05 TinyButStrong (TBS) 是一个PHP类,它能让你开发系统时能干净...没问题,TBS 同样能够让你创建 JavaScript 动态脚本. 正如它的名字一样, TBS 易用, 强大且快速. 它完全是 °~° 免费的°~°.
边学边练,依托网页实际开发,深入讲解JavaScript在网页中的各种应用;实例讲解,通过实例详细讲解每个知识点的实际应用。 本书共分为12章,分别介绍Web脚本编写和JavaScript语言的概念、JavaScript的基础知识、文档...