欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2013年11月28日 15:26:07   作者：  
這篇文章主要介紹了操作Table--動態(tài)添加刪除表格及數(shù)據(jù)實現(xiàn)代碼，有需要的朋友可以參考一下

效果：

 

代碼：

復制代碼 代碼如下:

<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" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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>

相關文章

最新評論