DOM动态添加删除表格内容所使用到的常用方法,) . 给表格行创建删除单元格的方法. 事件概念和事件监听

Posted 111wdh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM动态添加删除表格内容所使用到的常用方法,) . 给表格行创建删除单元格的方法. 事件概念和事件监听相关的知识,希望对你有一定的参考价值。

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("你失去了焦点 ");
}

以上是关于DOM动态添加删除表格内容所使用到的常用方法,) . 给表格行创建删除单元格的方法. 事件概念和事件监听的主要内容,如果未能解决你的问题,请参考以下文章

2020/6/3 JS 对表格元素进行增删改操作和事件监听

2020/6/3 JS 对表格元素进行增删改操作和事件监听

javascript动态添加删除表格

jQuery操作DOM

角度 5 - 如何从 dom 中删除动态添加的组件

JQuery动态创建删除DOM元素