您好,登錄后才能下訂單哦!
本文實例講述了JS表格的動態操作。分享給大家供大家參考,具體如下:
<html> <head> <title>js-表格的動態操作</title> <meta charset="UTF-8"/> <style type="text/css"> #ta tr{ height: 20px; } #t1{ font-weight: bold; /*align-content: center;*/ /*不能設置文本內容居中*/ } </style> <script type="text/javascript"> function delectOper(btn){ //獲取table對象,我們用其進行其對子元素的操作 var ta=document.getElementById("ta") //獲取其父類對象 var tr=btn.parentNode.parentNode; //我們進行刪除操作是刪除其所在的行,所以我們用兩次parent操作,第一層得到其所在的列(單元格),再進一層得到其所在的行對象 //執行刪除操作 ta.deleteRow(tr.rowIndex); //進行刪除操作時,我們用父類對象刪除子類對象, //注:對于div等對象我們可以使用remove方法,但是對于表格的屬性我們利用delete進行操作,而且我們利用他的rowIndex(行號)而不是其id亦或是對象 //我們沒法對每一個行設置一個id所以用這種方法(通過調入對象找到其父類對象)更加的方便 } function changeOper(n){ // var n=n; //獲取修改的位置對象 var cell=document.getElementById("cell"+n); //進行一定的限制(只有是數字的情況下才能進行拼接) if(!isNaN(Number(cell.innerHTML))){//isNAN如果是true則表示數值不是數字,如果不添加就會產生連續點擊修改時出現把源碼拼接上的情況 //修改對象的類型 cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='changeOper2(this,this.parentNode)'/>" //利用value='"+cell.innerHTML+"'可以實現內容的拼接注意:其內部的值是"+cell.innerHTML+"一個拼接量 //注意格式:在""內部的要用'', //不知道為什么在內部不能直接把cell和n當參數傳出去,但是可以傳this對象,所以對應的我們利用this,簡介傳出其父對象 } //還有一個bug:當用戶輸入的值是字符(不是數字),其也會進行value的賦值,但是無法再觸發修改按鍵,只能檢索原對象的內容類型,無法檢索用戶的 } function changeOper2(inp,cell){ //獲取修改位置對象 // var cell=document.getElementById("cell"+n); //修改對象的類型 cell.innerHTML=inp.value; //通過對象獲得用戶修改獲得value值 } //明白了:document可以調用任何的id,(好比其他都是全局變量一樣),但是他的局限是獲取的方法有限,必須有特定的屬性才能獲取 //document。innerHTML是對其內部的內容進行重寫。 </script> </head> <body> <h4 align="center">表格的動態操作</h4> <hr /> <table border="1px" id="ta" align="center"> <!--align可以直接把整個表格居中--> <tr id="t1" align="center"> <td width="200px">Animation</td> <td width="100px">上映年份</td> <td width="100px">評分(10分)</td> <td width="200px">投幣</td> <td width="200px">操作</td> </tr> <tr align="center"> <td>clannad</td> <td>2008</td> <td>9.9</td> <td id="cell2">100</td> <td> <input type="button" name="" id="" value="修改" onclick="changeOper(2)"/> <input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/> </td> </tr> <tr align="center"> <td>月色真美</td> <td>2017</td> <td>9.4</td> <td id="cell3">70</td> <td> <input type="button" name="" id="" value="修改" onclick="changeOper(3)"/> <input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/> </td> </tr> <tr align="center"> <td>境界的彼方</td> <td>2013</td> <td>9.4</td> <td id="cell4">60</td> <td> <input type="button" name="" id="" value="修改" onclick="changeOper(4)"/> <input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/> </td> </tr> </table> </body> </html>
運行效果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。