JavaScript talbe表中指定位置插入一行的實現代碼 指令碼之家修正版_javascript技巧

來源:互聯網
上載者:User
最近在學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,繼續交流。
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.