使用JavaScript在表中指定位置插入一行
来源:互联网 发布:python 爬知乎 编辑:程序博客网 时间:2024/05/18 00:43
最近在学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(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>
<br />
<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>
这里需要注意的是当鼠标点击插入行按钮时,动作也会捕捉到并改变全局变量,一开始我没有意识到,即没有加入上面的红色代码,所以每次点击插入行时都是在第一行插入,原来按原设计,点击按钮时全局变量更改为0,所以只能在第一行添加了。
简单的解决方法是加入红色代码,这是即可避免刚才的问题。
以上只是学习过程中的小经历,可以以此为模版,比如删除指定的行,或在指定行之前插入等功能皆可完成。
继续学习JavaScript,继续交流。
- 使用JavaScript在表中指定位置插入一行
- JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版 转(http://www.jb51.net/article/18502.htm)
- 在表中指定位置添加字段
- 在数组中指定的位置插入一个数.
- SQL2008 在一个表中指定的列位置插入一个新列的方法
- 使用sed在一个文件中指定位置插入另外一个文件的内容-r命令的使用
- 向字符串中指定位置插入字符
- 在表中指定位置加上一个字段
- mysql数据库在表中指定位置增加一列
- 使用Docx4j向docx文档中指定书签位置插入图片
- 可编辑div中指定位置插入内容的方法
- Python:字符串中指定位置插入一个字符
- 如何在Tomcat中指定log文件的位置(使用log4j输出log信息)
- 在屏幕中指定位置输出自定义字体文字
- 在嵌套循环中指定跳出循环的位置
- 在数组中指定位置添加和删除元素
- 删除链表中指定位置的元素
- [QTP]通过vbscript往文本文件中指定位置插入指定内容
- FTP 上传下载,多进程,多线程上传(1)
- 不同的标签初始背景与滑过背景巧妙实现
- 完整正确的wav文件格式分析详解
- Java牛角尖【010】: 当对象a.equals(b)时,a.hashCode == b.hashCode吗?
- c# 根据当前时间获取,本周,本月,本季度,月初,月末,各个时间段
- 使用JavaScript在表中指定位置插入一行
- 手工建的账号能访问SVN,不能用LDAP账号登录SVN的故障
- UIComponent之life cycle
- 关于SMOD和CMOD
- 对perl的误解
- 《高性能网站建设指南》精要
- INNODB与ORACLE单行存储长度对比
- 取得时间(周、月、季度)
- red hat 5修改分辨率