这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近在学 JavaScript,下面是我自己做的一个例子(在 w3cschool 例子的基础上) 该例子实现功能是在鼠标点击的行之后插入一行,默认是在第一行插入。插入的内容可以自己输入,代码如下
用 js 实现的在 table 中指定的位置插入一行,先点一下表中你想插入的位置,点击即可。
[Ctrl+A 全选 注:
- <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>
如需引入外部 Js 需刷新才能执行
]上面的是内容,默认是插入到开始位置。这里需要注意的是当鼠标点击插入行按钮时,动作也会捕捉到并改变全局变量,一开始我没有意识到,即没有加入上面的红色代码,所以每次点击插入行时都是在第一行插入,原来按原设计,点击按钮时全局变量更改为 0,所以只能在第一行添加了。 简单的解决方法是加入红色代码,这是即可避免刚才的问题。 以上只是学习过程中的小经历,可以以此为模版,比如删除指定的行,或在指定行之前插入等功能皆可完成。 继续学习 JavaScript,继续交流。
来源: http://www.phperz.com/article/17/0416/287120.html