国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS小功能(操作Table--動態(tài)添加刪除表格及數(shù)據(jù))實現(xiàn)代碼

2019-11-20 21:34:01
字體:
供稿:網(wǎng)友

效果:

 

代碼:

復(fù)制代碼 代碼如下:

<head runat="server">
    <title></title>
    <style type="text/css">
        tr
        {
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oName = document.getElementById('txt1');
            var oEasyName = document.getElementById('txt2');
            var oHero = document.getElementById('txt3');
            var oBtn = document.getElementById('btn');
            var oTab = document.getElementById('tab1');
            var num = oTab.tBodies[0].rows.length + 1;
            oBtn.onclick = function () {
                var oTr = document.createElement('tr');

                var oTd = document.createElement('td')
                oTd.innerHTML = num++;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oEasyName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oHero.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = '<a href="#">刪除</a>';
                oTr.appendChild(oTd);
                oTd.getElementsByTagName('a')[0].onclick = function () {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }
                oTab.tBodies[0].appendChild(oTr);
            }
        };
    </script>
</head>
<body>
    <div style="margin-left: 300px; margin-top: 30px;">
        種族名稱:<input type="text" id="txt1" />
        種族簡稱:<input type="text" id="txt2" />
        英雄 :<input type="text" id="txt3" />        
        <input type="button" id="btn" value="添加信息" />
    </div>
    <table id="tab1" border="1" style="text-align: center; width: 800px; margin-left: 300px;
        margin-top: 10px;">
        <thead>
            <tr style="background-color: #FF0000">
                <td>
                    序號
                </td>
                <td>
                    種族名稱
                </td>
                <td>
                    種族簡稱
                </td>
                <td>
                    英雄
                </td>
                <td>
                    操作
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td>
                    人類聯(lián)盟
                </td>
                <td>
                    HUM
                </td>
                <td>
                    代表性英雄:AM
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    獸人部落
                </td>
                <td>
                    ORC
                </td>
                <td>
                    代表性英雄:BM
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td>
                    不死亡靈
                </td>
                <td>
                    UD
                </td>
                <td>
                    代表性英雄:DK
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    暗夜精靈
                </td>
                <td>
                    NE
                </td>
                <td>
                    代表性英雄:DH
                </td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 蓬溪县| 曲麻莱县| 淄博市| 红桥区| 雷州市| 昆山市| 宁夏| 德保县| 高邑县| 涟源市| 迁西县| 郁南县| 黄陵县| 清原| 瓮安县| 雷波县| 获嘉县| 铁力市| 宜川县| 平乡县| 安西县| 博爱县| 平乐县| 牟定县| 内丘县| 藁城市| 视频| 林西县| 封开县| 扎囊县| 仁怀市| 芒康县| 辰溪县| 洛阳市| 沂水县| 云林县| 广德县| 大邑县| 东乡族自治县| 子洲县| 米泉市|