JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版
最近在学JavaScript,下面是我自己做的一个例子(在w3cschool例子的基础上)
该例子实现功能是在鼠标点击的行之后插入一行,默认是在第一行插入。插入的内容可以自己输入,代码如下
//global var
var pos =0
//to find the position you mouse has pressed
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
if(targ.tagName=="TD"){//to adjust whether the element is tabledata
pos = targ.parentNode.rowIndex+1
}
else if(targ.tagName=="INPUT"){
//to do nothing
} else{
pos =0
}
//alert(pos)
}
//to insert a row in the place
function insRow()
{
//alert(pos)
var x=document.getElementById('myTable').insertRow(pos)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML=document.getElementById("cell1").value
z.innerHTML=document.getElementById("cell2").value
}
Row1 cell1 | Row1 cell2 |
Row2 cell1 | Row2 cell2 |
Row3 cell1 | Row3 cell2 |
Cell1:
Cell2:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上面的是内容,默认是插入到开始位置。
这里需要注意的是当鼠标点击插入行按钮时,动作也会捕捉到并改变全局变量,一开始我没有意识到,即没有加入上面的红色代码,所以每次点击插入行时都是在第一行插入,原来按原设计,点击按钮时全局变量更改为0,所以只能在第一行添加了。
简单的解决方法是加入红色代码,这是即可避免刚才的问题。
以上只是学习过程中的小经历,可以以此为模版,比如删除指定的行,或在指定行之前插入等功能皆可完成。
继续学习JavaScript,继续交流。