JavaScript talbe表中指定位置插入一行的實現(xiàn)代碼腳本之家修正版

更新時間：2009年06月11日 21:48:33 作者：

用js實現(xiàn)的在table中指定的位置插入一行，先點一下表中你想插入的位置，點擊即可。

最近在學(xué)JavaScript，下面是我自己做的一個例子（在w3cschool例子的基礎(chǔ)上）
該例子實現(xiàn)功能是在鼠標點擊的行之后插入一行，默認是在第一行插入。插入的內(nèi)容可以自己輸入，代碼如下

<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需再刷新一下頁面才能執(zhí)行]

上面的是內(nèi)容，默認是插入到開始位置。
這里需要注意的是當鼠標點擊插入行按鈕時，動作也會捕捉到并改變?nèi)肿兞?，一開始我沒有意識到，即沒有加入上面的紅色代碼，所以每次點擊插入行時都是在第一行插入，原來按原設(shè)計，點擊按鈕時全局變量更改為0，所以只能在第一行添加了。
簡單的解決方法是加入紅色代碼，這是即可避免剛才的問題。
以上只是學(xué)習過程中的小經(jīng)歷，可以以此為模版，比如刪除指定的行，或在指定行之前插入等功能皆可完成。
繼續(xù)學(xué)習JavaScript，繼續(xù)交流。

您可能感興趣的文章:

相關(guān)文章

詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個強大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下
2015-12-12
javascript和jquery實現(xiàn)用戶登錄驗證
這篇文章主要為大家詳細介紹了javascript和jquery分別實現(xiàn)用戶登錄驗證的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
JS實現(xiàn)可拖曳、可關(guān)閉的彈窗效果
這篇文章主要介紹了JS實現(xiàn)可拖曳、可關(guān)閉的彈窗效果,可實現(xiàn)點擊文字彈出可拖動的窗口,同時背景出現(xiàn)變暗的遮罩效果,點擊遮罩層即可關(guān)閉彈出,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
Javascript Function.prototype.bind詳細分析
這篇文章主要介紹了Javascript Function.prototype.bind詳細分析的相關(guān)資料,需要的朋友可以參考下
2016-12-12
js將鍵值對字符串轉(zhuǎn)為json字符串的方法
下面小編就為大家分享一篇js將鍵值對字符串轉(zhuǎn)為json字符串的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹,本文給大家分享多種方法通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
javascript 防止刷新,后退,關(guān)閉
常常會用到的停留頁面的操作.兼容IE,FF.實現(xiàn)代碼如下。
2010-08-08
JS生成隨機打亂數(shù)組的方法示例
這篇文章主要介紹了JS生成隨機打亂數(shù)組的方法,涉及javascript數(shù)組隨機排序的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
微信小程序開發(fā)的基本流程步驟
這篇文章主要介紹了微信小程序開發(fā)的基本流程步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Python版實現(xiàn)微信公眾號掃碼登陸
這篇文章主要介紹了Python版實現(xiàn)微信公眾號掃碼登陸，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2020-05-05