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

效果:


 

代码:

复制代码 代码如下:

<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>

时间: 2024-10-31 13:36:39

JS小功能(操作Table--动态添加删除表格及数据)实现代码_javascript技巧的相关文章

js动态添加删除,后台取数据(示例代码)_javascript技巧

环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!!/*************************************************************************** 添加审批表单模板************************************************************************/// 增长的索引var itemIndex = 1000;// 数量var counter = 0;/

javascript实现动态增加删除表格行(兼容IE/FF)_javascript技巧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>动态增删表格行</title> <script language="JavaScript"> <!-- //author: 

动态添加删除表格行的js实现代码

 本篇文章主要是对动态添加删除表格行的js实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <html> <head> <script language="javascript">   //窗口表格增加一行   function addNewRow(){    var tabObj=document.getElementById("myTab");//获取添加数据的表格    var rowsNum

基于JavaScript实现动态添加删除表格的行_javascript技巧

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t

JS自定义功能函数实现动态添加网址参数修改网址参数值

本文自定义JS功能函数可动态添加网址参数,修改网址参数值,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助   无论是前端开发还是后台设计,很多时候开发人员都需要获取当前或目标网址的相关信息.这个已有现成的内置对象属性可以直接调用了(下面是获取当前页面的参考代码) 复制代码 代码如下: <script type="text/javascript"> thisURL = document.URL; thisHREF = document.location.href;

js dom动态添加删除表格数据的例子

学习了两天的 js dom 高级操作应用,实例代码基本上都听懂了,只是自己还没有能力全部敲出来,因为 js 操作 table 的代码太多了,js 对节点操作除了 div 之外,也可以更好的操作表单,这两天学到的是 js 如何进行对 table 的操作,当然也遇到了神奇的 js 增删改查,虽然没有用到数据库,但其效果蛮给力的,本来视频的代码想要一行一行敲下来,只是脑子里太乱了,只能从网上把视频上的代码给拷贝下来,仅供自己参考使用吧,这里的代码是关于 js 动态添加与删除表格数据的,感觉有点意思,回

Javascript 创建类并动态添加属性及方法的简单实现_javascript技巧

JavaScript 是一种很强的面向对象的语言,支持创建实例之后再添加属性和方法,虽然是小技巧,用的时候容易忘记,今天写了一个很小的例子,记录在这里,仅供参考. function MyClass() { //This function is same as a constructer alert("New Object Created"); } //Creating Object var MyObject = new MyClass (); NewObject.prototype =

javascript动态添加checkbox复选框的方法_javascript技巧

本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧

一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo