DOM动态添加删除表格内容所使用到的常用方法：
|
insertRow(index) |
在指定索引位置插入一行 |
|
createCaption() |
为该表格创建标题 |
|
deleteRow(index) |
删除表格中index索引处的行 |
|
deleteCaption() |
删除表格标题 |
给表格行创建、删除单元格的方法：
|
insertCell(index) |
index处创建一个单元格，返回新创建的单元格 |
|
deleteCell(index) |
删除某行在index索引处的单元格 |
<body id="test">
<input type="button" value="创建一个5行4列的表格" onclick="create1()">
<input type="button" value="删除最后一行" onclick="delrow()">
<input type="button" value="删除最后一个单元格" onclick="delcell()">
</body>
var tables=document.createElement("table");
tables.id="mytable";
tables.border="1px";
tables.width="500px";
tables.height="500px";
function create1(){
for(i=0;i<5;i++){ //循环插入五行
var row=tables.insertRow(i);
for(j=0;j<4;j++){ //循环插入四列
var cell=row.insertCell(j);
cell.innerHTML="第"+(i+1)+"行，第"+(j+1)+"列";
}
}
var body=document.getElementsByTagName("body")[0];//获取body节点
body.appendChild(tables);
}
function delrow(){
//判断表格中是否有行
if(tables.rows.length>0){
//从最后一行开始删除
tables.deleteRow(tables.rows.length-1);
}
else{
//元素中没有行了，把table元素从body元素中删除
var body=document.getElementsByTagName("body")[0];
body.removeChild(tables);//删除表格元素
}
}
function delcell(){
if(tables.rows.length>0){//如果有tr执行
//获取table最后一行
var last=tables.rows[tables.rows.length-1];
//判断最后一行中是否有列
if(last.cells.length>0){
last.deleteCell(last.cells.length-1);//删除最后一列
}
else{//没有td删除tr
tables.deleteRow(tables.rows.length-1);
}
}else{//没有tr删除body
var body=document.getElementsByTagName("body")[0];
body.removeChild(tables);//删除表格元素
}
}
事件概念和事件监听
1.绑定HTML元素属性
|
<input id=”btn1” type="button" value="clickMe" onClick="check(this)"> |
2.绑定DOM对象属性
|
document.getElementById(“btn1”).onClick=test;//test函数名 |
<body>
<a href="https://www.baidu.com/" onclick="return false">点击我</a>
<input type="button" value="测试1" id="mytest1" onclick="get(this)">
<button type="button" value="测试2" id="test2"><b>测试2</b></button>
</body>
function get(str){
alert(str.value);
}
window.onload=function(){
var btn = document.getElementById("test2");
btn.onclick=get2;
}
function get2(){
alert(this.value);
}
标准DOM中的事件监听方法
[object].addEventListener(“事件类型”,”处理函数”,false);
[object].removeEventListener(“事件类型”,”处理函数”,false);
<body>
<input type="button" value="测试1" id="mytest1">
<button type="button" id="mytest2"><b>测试2</b></button>
</body>
window.onload=function(){
//获取测试1
var q1=document.getElementById("mytest1");
//添加监听事件
q1.addEventListener("click",get,false);
}
function get(){
alert("你点击了第一个按钮");
}
常见的事件类型：
|
onclick |
单击鼠标左键触发 |
|
ondblclick |
双击鼠标左键触发 |
|
onmousedown |
单击任意一个鼠标按键时触发 |
|
onmouseout |
鼠标指针移出一个元素边界时触发 |
|
onmousemove |
鼠标在某个元素上移动时持续触发 |
|
onmouseup |
松开鼠标任意一个按键时触发 |
|
onmouseover |
鼠标指针移到一个元素上时触发 |
点击按钮换颜色
<body id="dd">
<input type="button" name="" id="" value="红色" onclick="change(this)"/>
<input type="button" name="" id="" value="绿色" onclick="change(this)"/>
<input type="button" name="" id="" value="蓝色" onclick="change(this)"/>
</body>
function change(q){
//获取元素的节点的value属性值
var i=q.value;
//获取body元素节点
var body=document.getElementById("dd");
if(i=="红色"){
body.style.background="red";
}else if(i=="蓝色"){
body.style.background="blue";
}else if(i=="绿色"){
body.style.background="green";
}
}
鼠标移入鼠标移出
<div id="dd" onmouseover="get()" onmouseout="get1()">
</div>
var i=document.getElementById("dd");//获取div元素节点
// i.onmouseover=function(){
// i.style.background="yellow";//鼠标移入
// }
// i.onmouseout=function(){
// i.style.background="bisque";
// }
function get(){
i.style.background="yellow";
}
function get1(){
i.style.background="bisque";
}
常用的键盘事件：
|
onkeydown |
按下键盘上某个按键时触发，一直按会持续触发 |
|
onkeyup |
释放某个按键时触发 |
|
onkeypress |
按下某个按键并产生字符时触发，忽略shift等功能键 |
HTML事件：
|
onload |
页面完全加载后在window对象上触发 |
|
onunload |
页面完全卸载后再window对象上触发 |
|
onselect |
选择了文本框的一个或多个字符时触发 |
|
onchange |
文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 |
|
onsubmit |
单击“提交”按钮时在表单form上触发 |
|
onfocus |
任何元素或窗口获得焦点时触发 |
|
onblur |
任何元素或窗口失去焦点时触发 |
<form action="" method="" onsubmit="ons()">
<input type="text" name="" id="tt" value="" onkeyup="up(this)" />
<input type="text" name="" id="" value="" onselect="Select1()" />
<input type="text" name="" id="" value="" onchange="ch()" />
<input type="submit" name="" id="" value="提交" />
<input type="text" name="" id="" value="" onfocus="f()" />
<input type="text" name="" id="" value="" onblur="f1()" />
</form>
function ons(){
alert("你提交了表单");
}
function Select1(){
alert("你选中了文本");
}
function up(o){
alert(o.value);
}
function ch(){
alert("你改变了内容");
}
function f(){
alert("你获得了焦点 ");
}
function f1(){
alert("你失去了焦点 ");
}