JS表格的動態操作完整示例

 更新時間:2020年01月13日 09:45:31   作者:qq_42412646   我要評論
這篇文章主要介紹了JS表格的動態操作,結合完整實例形式詳細分析了JavaScript針對表格元素的動態修改與刪除簡單操作技巧,需要的朋友可以參考下

本文實例講述了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>
        <h3 align="center">表格的動態操作</h3>
        <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程序設計有所幫助。

相關文章

  • javascript正則表達式模糊匹配IP地址功能示例

    javascript正則表達式模糊匹配IP地址功能示例

    這篇文章主要介紹了javascript正則表達式模糊匹配IP地址功能,結合簡單實例形式演示了JS模糊匹配IP地址的實現方法,涉及針對數字及字符串的相關正則判定與匹配操作技巧,需要的朋友可以參考下
    2017-01-01
  • js獲取客戶端操作系統類型的方法【測試可用】

    js獲取客戶端操作系統類型的方法【測試可用】

    這篇文章主要介紹了js獲取客戶端操作系統類型的方法,可有效的判斷常見操作系統的類型,包括Windows、MacOS、Unix及Linux等,涉及javascript頁面navigator.userAgent屬性操作技巧,需要的朋友可以參考下
    2016-05-05
  • JSON格式的鍵盤編碼對照表

    JSON格式的鍵盤編碼對照表

    這篇文章主要介紹了JSON格式的鍵盤編碼對照表,本文給出英文鍵名、對應數值和中文注釋,需要的朋友可以參考下
    2015-01-01
  • js動態設置select下拉菜單的默認選中項實例

    js動態設置select下拉菜單的默認選中項實例

    今天小編就為大家分享一篇js動態設置select下拉菜單的默認選中項實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JS獲取字符串實際長度(包含漢字)的簡單方法

    JS獲取字符串實際長度(包含漢字)的簡單方法

    下面小編就為大家帶來一篇JS獲取字符串實際長度(包含漢字)的簡單方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • javascript按順序加載運行js方法

    javascript按順序加載運行js方法

    本篇文章主要教給大家如何在javascript中動態加載按順序加載運行js的方法以及實現代碼,需要的朋友參考學習下吧。
    2017-12-12
  • 基于JavaScript實現多級菜單效果

    基于JavaScript實現多級菜單效果

    這篇文章主要為大家詳細介紹了基于JavaScript實現多級菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • WEB高性能開發之瘋狂的HTML壓縮

    WEB高性能開發之瘋狂的HTML壓縮

    一篇隨筆中網友 skyaspnet 問我如何壓縮HTML,當時回答是推薦他使用gzip,后來想想,要是能把所有的html,jsp(aspx)在運行前都壓縮成1行未免不是一件好事啊。
    2010-06-06
  • JS實現的JSON數組去重算法示例

    JS實現的JSON數組去重算法示例

    這篇文章主要介紹了JS實現的JSON數組去重算法,結合實例形式分析了javascript針對json數組的遍歷、判斷實現去重復功能相關操作技巧,需要的朋友可以參考下
    2018-04-04

最新評論

pc蛋蛋幸运28app下载地址