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，继续交流。

赞 (0)

相关推荐

  • js获取鼠标位置杂谈附多浏览器兼容代码

    其实获得鼠标位置就是一句话的事情,但是要是不了解浏览器间的区别,整个过程就会让人很郁闷,区别在与: 1.IE下获得x和y轴的距离分别用event.x和event.y: FF下获得x和y轴的距离分别用event.pageX和event.pageY: 2.IE下用此方法获得的位置是不算滚动条滚过的位置的,即它只会算到浏览器边缘: FF则会算进滚过去的那些位置: (这个地方很让我崩溃,为这么点小区别我把所有用到的程序全部重写了一遍,囧死--) 解决1的办法,无非是判断一下浏览器,然后用什么方式: 解决

  • javascript 获取页面的高度及滚动条的位置的代码

    复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

  • Javascript在IE或Firefox下获取鼠标位置的代码

    第一段代码是利用全局变量来获取实时鼠标的位置. 复制代码 代码如下: var xPos; var yPos; window.document.onmousemove(function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft; yPo

  • Javascript中找到子元素在父元素内相对位置的代码

    经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

  • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用javascript获取鼠标位置: 复制代码 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - docu

  • js获取鼠标点击的位置实现思路及代码

    copy来的,但是原页面的代码还是需要修改,下面是修改可用的 常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条所滚动的距离. 复制代码 代码如下: function pointerX(event) { return event.pageX || (event.clientX + (document.documentE

  • 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

    首先引入JavaScript API文件 <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script> 此API提供的接口共有6个,geoip_country_code(){国家代码},geoip_country_ name(){国家名称},geoip_city() {城市名称},geoip_region(){地区代码},geoip_latit

  • JavaScript程序开发之JS代码放置的位置

    JavaScript程序开发之JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下. 一般来说有两种方式,写在界面上和使用.js文件. 1.1界面上的Head部分 可以直接放在head标签内,如下代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>testPage</title> <script type=&quo

  • 用Javascript 获取页面元素的位置的代码

    用Javascript 获取页面元素的位置的代码

    下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的绝对大小.通常情况下,网页的绝对大小由内容和CSS样式表决定. 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口). 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页. (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的

  • 多浏览器兼容的获取元素和鼠标的位置的js代码

    复制代码 代码如下: //获取元素的位置 function getLeft(obj) { if (obj == null) return null; var mendingObj = obj; var mendingLeft = mendingObj.offsetLeft; while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != &q

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • js获取元素相对窗口位置的实现代码

    JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + p

  • JavaScript代码应该放在HTML代码哪个位置比较好？

    在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法.由于 HTML 文档是由浏览器从上到下依次载入的

随机推荐