快捷導(dǎo)航

JS表格的動態(tài)操作完整示例

更新時間：2020年01月13日 09:45:30 作者：qq_42412646

這篇文章主要介紹了JS表格的動態(tài)操作,結(jié)合完整實例形式詳細(xì)分析了JavaScript針對表格元素的動態(tài)修改與刪除簡單操作技巧,需要的朋友可以參考下

本文實例講述了JS表格的動態(tài)操作。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>js-表格的動態(tài)操作</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            #ta tr{
                height: 20px;
            }
            #t1{
                font-weight: bold;
                /*align-content: center;*/
                /*不能設(shè)置文本內(nèi)容居中*/
            }
        </style>
        <script type="text/javascript">
            function delectOper(btn){
                //獲取table對象，我們用其進(jìn)行其對子元素的操作
                var ta=document.getElementById("ta")
                //獲取其父類對象
                var tr=btn.parentNode.parentNode;  //我們進(jìn)行刪除操作是刪除其所在的行，所以我們用兩次parent操作，第一層得到其所在的列(單元格)，再進(jìn)一層得到其所在的行對象
                //執(zhí)行刪除操作
                ta.deleteRow(tr.rowIndex);  //進(jìn)行刪除操作時，我們用父類對象刪除子類對象，
                //注：對于div等對象我們可以使用remove方法，但是對于表格的屬性我們利用delete進(jìn)行操作，而且我們利用他的rowIndex(行號)而不是其id亦或是對象
                //我們沒法對每一個行設(shè)置一個id所以用這種方法(通過調(diào)入對象找到其父類對象)更加的方便
            }
            function changeOper(n){
//                var n=n;
                //獲取修改的位置對象
                var cell=document.getElementById("cell"+n);
                //進(jìn)行一定的限制(只有是數(shù)字的情況下才能進(jìn)行拼接)
                if(!isNaN(Number(cell.innerHTML))){//isNAN如果是true則表示數(shù)值不是數(shù)字，如果不添加就會產(chǎn)生連續(xù)點擊修改時出現(xiàn)把源碼拼接上的情況
                //修改對象的類型
                cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='changeOper2(this,this.parentNode)'/>" //利用value='"+cell.innerHTML+"'可以實現(xiàn)內(nèi)容的拼接注意：其內(nèi)部的值是"+cell.innerHTML+"一個拼接量
                //注意格式：在""內(nèi)部的要用'',        //不知道為什么在內(nèi)部不能直接把cell和n當(dāng)參數(shù)傳出去，但是可以傳this對象，所以對應(yīng)的我們利用this，簡介傳出其父對象
                }  //還有一個bug:當(dāng)用戶輸入的值是字符(不是數(shù)字),其也會進(jìn)行value的賦值,但是無法再觸發(fā)修改按鍵，只能檢索原對象的內(nèi)容類型，無法檢索用戶的
            }
            function changeOper2(inp,cell){
                //獲取修改位置對象
//                var cell=document.getElementById("cell"+n);
                //修改對象的類型
                cell.innerHTML=inp.value;  //通過對象獲得用戶修改獲得value值
            }
            //明白了：document可以調(diào)用任何的id,(好比其他都是全局變量一樣)，但是他的局限是獲取的方法有限，必須有特定的屬性才能獲取
            //document。innerHTML是對其內(nèi)部的內(nèi)容進(jìn)行重寫。
        </script>
    </head>
    <body>
        <h3 align="center">表格的動態(tài)操作</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>

運行效果：