JavaScripttalbe表中指定位置插入一行的实现代码脚本之家修正版_javascript技巧_动视

JavaScripttalbe表中指定位置插入一行的实现代码脚本之家修正版_javascript技巧

2020-11-27 20:43:10 责编:小采

最近在学JavaScript，下面是我自己做的一个例子（在w3cschool例子的基础上）
该例子实现功能是在鼠标点击的行之后插入一行，默认是在第一行插入。插入的内容可以自己输入，代码如下

<html> 
<head> 
 
//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 
} 
</ script> 
</head> 
<body onmousedown="whichElement(event)"> 
<table id="myTable" border="1"> 
<tr> 
<td>Row1 cell1</td> 
<td>Row1 cell2</td> 
</tr> 
<tr> 
<td>Row2 cell1</td> 
<td>Row2 cell2</td> 
</tr> 
<tr> 
<td>Row3 cell1</td> 
<td>Row3 cell2</td> 
</tr> 
</table>

<p> 
Cell1:<input type="text" id= "cell1" value="cell1"/> 
Cell2:<input type="text" id= "cell2" value="cell2"/> 
</p> 
<input type="button" onclick="insRow()" value="插入行"> 
<div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上面的是内容，默认是插入到开始位置。
这里需要注意的是当鼠标点击插入行按钮时，动作也会捕捉到并改变全局变量，一开始我没有意识到，即没有加入上面的红色代码，所以每次点击插入行时都是在第一行插入，原来按原设计，点击按钮时全局变量更改为0，所以只能在第一行添加了。
简单的解决方法是加入红色代码，这是即可避免刚才的问题。
以上只是学习过程中的小经历，可以以此为模版，比如删除指定的行，或在指定行之前插入等功能皆可完成。
继续学习JavaScript，继续交流。

下载本文

显示全文

全部频道