编程 Javascript

JS小功能(操作Table--动态添加删除表格及数据)实现代码

Posted in Javascript onNovember 28, 2013

效果：

代码：

<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>
                    人类联盟
                </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>

JS小功能(操作Table--动态添加删除表格及数据)实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

常用参考资料（手册）下载或者链接

Jul 22 Javascript

简单的JS多重继承示例

Mar 13 Javascript

文本框获得焦点和失去焦点的判断代码

Mar 18 Javascript

jquery按回车提交数据的代码示例

Nov 05 Javascript

$.extend 的一个小问题

Jun 18 Javascript

Vue.js基础知识小结

Jan 13 Javascript

vue生成token保存在客户端localStorage中的方法

Oct 25 Javascript

jquery插件开发模式实例详解

Jul 20 jQuery

layui 实现表格某一列显示图标

Sep 19 Javascript

JS apply用法总结和使用场景实例分析

Mar 14 Javascript

webpack+express实现文件精确缓存的示例代码

Jun 11 Javascript

微信小程序canvas动态时钟

Oct 22 Javascript

JS小功能(offsetLeft实现图片滚动效果)实例代码

Nov 28 #Javascript

JS小功能(列表页面隔行变色)简单实现

Nov 28 #Javascript

jQuery计算textarea中文字数(剩余个数)的小程序

Nov 28 #Javascript

javascript打印html内容功能的方法示例

Nov 28 #Javascript

javascript列表框操作函数集合汇总

Nov 28 #Javascript

JavaScript调用客户端的可执行文件(示例代码)

Nov 28 #Javascript

js实现单行文本向上滚动效果实例代码

Nov 28 #Javascript