JavaScript talbe表中指定位置插入一行的实现代码脚本之家修正版

更新时间：2009年06月11日 21:48:33 作者：

用js实现的在table中指定的位置插入一行，先点一下表中你想插入的位置，点击即可。

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

<html> <head> <script type="text/javascript"> //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="插入行"> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

您可能感兴趣的文章:

详解js中构造流程图的核心技术JsPlumb
这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下
2015-12-12
javascript和jquery实现用户登录验证
这篇文章主要为大家详细介绍了javascript和jquery分别实现用户登录验证的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
JS实现可拖曳、可关闭的弹窗效果
这篇文章主要介绍了JS实现可拖曳、可关闭的弹窗效果,可实现点击文字弹出可拖动的窗口,同时背景出现变暗的遮罩效果,点击遮罩层即可关闭弹出,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
Javascript Function.prototype.bind详细分析
这篇文章主要介绍了Javascript Function.prototype.bind详细分析的相关资料,需要的朋友可以参考下
2016-12-12
js将键值对字符串转为json字符串的方法
下面小编就为大家分享一篇js将键值对字符串转为json字符串的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
JavaScript判断数据类型有几种方法及区别介绍
这篇文章主要介绍了JavaScript判断数据类型有几种方法及区别介绍,本文给大家分享多种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
javascript 防止刷新,后退,关闭
常常会用到的停留页面的操作.兼容IE,FF.实现代码如下。
2010-08-08
JS生成随机打乱数组的方法示例
这篇文章主要介绍了JS生成随机打乱数组的方法,涉及javascript数组随机排序的相关操作技巧,需要的朋友可以参考下
2017-12-12
微信小程序开发的基本流程步骤
这篇文章主要介绍了微信小程序开发的基本流程步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Python版实现微信公众号扫码登陆
这篇文章主要介绍了Python版实现微信公众号扫码登陆，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05