上午学的查找裂表框与昨天学的非常相似
对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）通用的是所有浏览器，标准的是指ie浏览器。每个浏览器解析不同所有不同方法
通用的不用加上on看一下就明白了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找列表框、下拉菜单控件</title>
</head>
<body>
<form action="#">
<select name="city" id="city" size="1">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="tianjin">天津</option>
<option value="nabjing">南京</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onClick="change('0')">
<input type="button" value="上一个城市" onClick="change(s.selectedIndex-1)">
<input type="button" value="下一个城市" onClick="change(s.selectedIndex+1)">
<input type="button" value="最后一个城市" onClick="change(s.length-1)">
</form>
</body>
<script type="text/javascript">
// var f=document.getElementById("city").form;
// alert(f.action);
//// 获取下拉列表框的select元素对象
// var s=document.getElementById("city");
// alert(s.length);
function first(){
// 获取select元素
var s=document.getElementById("city");
// 获取select中的第一个option元素
var o=s.options[0]
// 获取options中的文本值
alert(o.text);
}
function last(){
// 获取select元素
var s=document.getElementById("city");
// 获取select选中元素的上一个元素
var o=s.options[s.selectedIndex-1];
// 获取options中的文本值
alert(o.text);
}
function next(){
// 获取select元素
var s=document.getElementById("city");
// 获取select选中元素的上一个元素
var o=s.options[s.selectedIndex+1];
// 获取options中的文本值
alert(o.text);
}
function over(){
// 获取select元素
var s=document.getElementById("city");
// 获取select选中元素的上一个元素
var o=s.options[s.length-1];
// 获取options中的文本值
alert(o.text);
}
// 获取select元素
var s=document.getElementById("city");
function change(index){
// 获取select选中元素的上一个元素
var o=s.options[index]; 能简化就简化
// 获取options中的文本值
alert(o.text);
}
</script>
</html>
对表格操作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格操作</title>
<script type="text/javascript">
function getcaption(){
// 获取表格元素
var tab=document.getElementById("mytable")
// 获取标题元素
var cap=tab.caption
// 获取标题中的内容
alert(cap.innerHTML)
}
function getCell(row,col){
// 获取表格元素
var tab=document.getElementById("mytable")
// 获取第row-1行，col-1行的元素
var cell=tab.rows[row-1].cells[col-1]
// 获取该单元格中d的内容
alert(cell.innerHTML)
}
function getCell(row,col){
// 获取表格元素
var tab=document.getElementById("mytable")
// 获取第row-1行，col-1行的元素
var cell=tab.rows[row-1].cells[col-1]
// 获取该单元格中d的内容
alert(cell.innerHTML)
}
function getCell(row,col){
// 获取表格元素
var tab=document.getElementById("mytable")
// 获取第row-1行，col-1行的元素
var cell=tab.rows[row-1].cells[col-1]
// 获取该单元格中d的内容
alert(cell.innerHTML)
}
function change(){
// 获取用户输入d的行的值
var row=document.getElementById("row").value;
// 获取用户输入d的列的值
var col=document.getElementById("cell").value;
// 获取用户修改单元格后的值
var content=document.getElementById("course").value;
// 获取表格对象
var tab=document.getElementById("mytable")
tab.rows[row-1].cells[col-1].innerHTML=content;
}
</script>
</head>
<body>
<table id="mytable" border="1">
<caption>甲骨文课程表</caption>
<tr>
<td>HTML</td>
<td>JavaScript</td>
</tr>
<tr>
<td>javaSE</td>
<td>Oracle</td>
</tr>
<tr>
<td>MySQL</td>
<td>Struts2</td>
</tr>
</table>
<input type="button" value="表格标题" onClick="getcaption()">
<input type="button" value="第一行、第一格" onClick=" getCell('1','1')">
<input type="button" value="第二行、第二格" onClick=" getCell('2','2')">
<input type="button" value="第三行、第二格" onClick=" getCell('3','2')"><br>
设置指定单元格的值：
第<input type="text" id="row" size="2">行，
第<input type="text" id="cell" size="2">列的值为
<input type="text" id="course" size="10" >
<input type="button" id="btn_set" value="修改" onClick="change()">
</body>
</html>
创建元素并且复制节点与删除
<!doctype html> <html> <head> <meta charset="utf-8"> <title>创建元素</title> <script type="text/javascript"> // function create(){ //// 获取ul元素 // var u=document.getElementById("city") //// 创建新的节点li // var l=document.createElement("li") //// 给li设置内容 // l.innerHTML="广州"; //// 将li添加到ul元素 // u.appendChild(l) // } function create(){ // 创建新的li元素 var l=document.createElement("li"); // 给li添加内容 l.innerHTML="南京" // 获取ul元素 var u=document.getElementById("city") // 再uld的第一个元素前插入li元素 u.insertBefore(l,u.firstChild.nextElementSibling) } function create(){ // 创建新的li元素 var l=document.createElement("li"); // 给li添加内容 l.innerHTML="南京" // 获取ul元素 var u=document.getElementById("city") // 将北京替换成南京 u.replaceChild(l,u.firstChild.nextElementSibling) } function copy(){ // 获取ul元素 var u=document.getElementById("city") // 获取要复制的节点 var oldli=u.firstChild.nextElementSibling; // 复制节点 var newli=oldli.cloneNode(true) // 将复制的节点添加到ul里 u.appendChild(newli) } function del(){ // 获取ul元素 var u=document.getElementById("city") // 获取要删除的子元素 var oldli=u.lastChild.previousElementSibling; // 删除上海 u.removeChild(oldli) } </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> </ul> <input type="button" value="创建插入替换节点" onClick="create()"> <input type="button" value="复制节点" onClick="copy()"> <input type="button" value="删除节点" onClick="del()"> </body> </html>
查找表单控件并且对表单的增删改
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找表单控件</title>
<script type="text/javascript">
function create1(){
// 创建select元素
var sel=document.createElement("select");
// 给select标签设置属性
sel.id="city";
sel.size="5";
// 获取body元素
var bo=document.getElementById("test");
// 创建option元素
for(var i=0;i<10;i++){
var op=new Option("选项"+i,i);
// 列表框或下拉菜单对象.option[i]=创建好的option对象
sel.options[i]=op;
}
// 将select元素添加到body标签中
bo.appendChild(sel);
}
// function del(){
//// 获取select元素
// var sel=document.getElementById("city")
//// 列表框或下拉菜单对象.remove(index)方法删除指定选项
// sel.remove(sel.length-1)
// }
// 或select对象.options[index]=null
function del(){
// 获取select元素
var sel=document.getElementById("city")
// select元素对象.options[index]=null
sel.options[sel.length-1]=null;
}
function clear2(){
// 获取select元素
var sel=document.getElementById("city")
// 让options数组为0
if(sel.options.length>0){
sel.options.length=0
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create1()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="clear2()">
</body>
</html>
对表格元素进行增删改操作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格元素进行增删改操作</title>
<script type="text/javascript">
function create1(){
// 创建table元素
var tab=document.createElement("table");
// 给table标签设置属性
tab.border="1px";
tab.id="mytable";
// 给表格插入五行四列
for(var i=0;i<5;i++){
var row=tab.insertRow(i);
for(var j=0;j<4;j++){
tab.rows[i].insertCell(j);
tab.rows[i].cells[j].innerHTML="表格"+i+j;
}
}
// 获取body元素
var bo=document.getElementById("test");
bo.appendChild(tab);
}
function del(){
// 获取table元素
var mytable=document.getElementById("mytable");
// 删除最后一行
mytable.deleteRow(mytable.rows.length-1);
}
function del2(){
// 获取table元素
var mytable=document.getElementById("mytable");
// 获取最后一行
var lastRow=mytable.rows[mytable.rows.length-1]
// 删除最后一个单元格
lastRow.deleteCell(lastRow.cells.length-1)
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个5行4列的表格" onClick=" create1()">
<input type="button" value="删除最后一行" onClick="del()">
<input type="button" value="删除最后一个单元格" onClick="del2()">
</body>
</html>
标准的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标准DOM中的事件监听方法</title>
<script type="text/javascript">
function show(){
alert("你点击我了");
}
//取消bt1按钮的点击事件
function concel(){
//[object].removeEventListener(“事件类型”,”处理函数”,false);
var bt1=document.getElementById("mytest1");
bt1.removeEventListener("click",show,false);
}
window.onload=function(){
//[object].addEventListener(“事件类型”,”处理函数”,false);
var bt1=document.getElementById("mytest1");
bt1.addEventListener("click",show,false);
//获取测试2按钮
var bt2=document.getElementById("mytest2");
bt2.addEventListener("click",concel,false);
}
</script>
</head>
<body>
<input type="button" value="测试1" id="mytest1">
<button type="button" id="mytest2"><b>测试2</b></button>
</body>
</html>