这段代码非常的简单，仅仅作为自己的一个小小的记录！

ok，先上一个简单的图例，效果如下（注意：这只是一个简单的例子，不过可以根据这个简单的例子，变化出更为复杂的效果）！

代码也非常的简单，如下所示（注意：图片的路径是在我的小例子中的，表的样式也有待自己的调整）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>例子</title>

        <script language="javascript">

            var i = 0, j = 1; //行号与列号

            var oNewRow; //定义插入行对象

            var oNewCell1, oNewCell2,oNewCell3; //定义插入列对象

            //添加下一行

            function addNextRow() {

                i = document.getElementById("MyTable").rows.length;

                oNewRow = document.getElementById("MyTable").insertRow(i);

                oNewRow.id = j;

                //添加第一列

                oNewCell1 = document.getElementById("MyTable").rows[i].insertCell(0);

                oNewCell1.innerHTML = "<input name='id_' type='text' style='width: 99%' id='investorName" + j + "'/>";

                //添加第二列

                oNewCell2 = document.getElementById("MyTable").rows[i].insertCell(1);

                oNewCell2.innerHTML = "<input name='name_' type='text'  style='width: 99%' id='investorProportion" + j + "'/>";

                //添加第三列

                oNewCell3 = document.getElementById("MyTable").rows[i].insertCell(2);

                oNewCell3.innerHTML = "<img src='images/button/ico/sc.png' name=del"+ j + " onClick='delCurrentRow(" + j + ");' width='16' height='16' />";

                j++;

            }

            //删除当前行

            function delCurrentRow(j) {

                with (document.getElementById("MyTable")) {

                    for ( var i = 0; i < rows.length; i++) {

                        if (rows[i].id == j) {

                            deleteRow(i);

                        }

                    }

                }

            }

        </script>

    </head>

    <body>

            <table id="MyTable" width="100%" border="0" cellpadding="0" cellspacing="0">

                <tr>

                    <td width="47%">ID号</td>

                    <td width="47%">姓名</td>

                    <td><img src="data:images/button/ico/plus.png" name="addRow_" onclick="addNextRow();" width="16" height="16" /></td>

                </tr>

                <tr>

                    <td><input name="id_" type="text" style="width: 99%" id="id"/></td>

                    <td><input name="name_" type="text" style="width: 99%" id="name"/></td>

                    <td>&nbsp;&nbsp;</td>

                </tr>

            </table>

    </body>

</html>

简单JS实现对表的行的增删的更多相关文章

  1. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  2. 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  3. js基础 1.简单js 语法 关键字 保留字 变量

    简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...

  4. http-server:一个简单的零配置命令行的http服务器

    首先简介一下http-server: http-server是一个简单的零配置命令行http服务器,他对于生产使用来说足够强大,他是简单和可删节足以用于测试,足够简单易用,而且可用于本地开发 1.首先 ...

  5. [转] 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    [From] http://www.cnblogs.com/lucker/p/4108838.html http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不 ...

  6. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  7. 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本

    <zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本      人脸识别.车牌识别是opencv当中 ...

  8. x264源代码简单分析：x264命令行工具（x264.exe）

    ===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...

  9. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

随机推荐

  1. Winform/WPF国际化处理

    1.Winfrom国际化处理方式 ==> Winform中国际化支持可将UI页面和.cs文件分开处理 处理窗体方式如下:1.选择Form窗体设置其--Language(默认中文--Default ...

  2. 黄聪：wordpress中PHP运行错最有效解决办法Fatal error: Out of memory (allocated 6029312)（转）

    近日在升级wordpress 3.2.1和若干插件的过程中,发现了一个wordpress的错误:Allowed memory size of XXX bytes exhausted Fatal err ...

  3. (C#) Lock - 将对象上锁，互斥多个线程，使同步。

    C# Lock 原文:http://www.dotnetperls.com/lock Locking is essential in threaded programs. It restricts c ...

  4. cheat engine lua

    function CEButton1Click(sender) local x = getProperty(CETrainer.CEEdit1,"Text")--这句很重要,获取文 ...

  5. 欧洲用户放弃Android转投iOS原因大起底

    据报道,近期在欧洲,有32.4%的新ios设备iPhone用户之前使用的是Android设备.那么为什么欧洲会有这么多Android用户会纷纷抛弃原有操作系统平台而转投iPhone呢? ios设备的同 ...

  6. [技巧]实际项目中background-image应写在页面上

    摘自:http://www.zhangxinxu.com 因为实际项目中(数据对接时),这肯定是个动态的URL地址,css文件似乎不支持动态URL 地址. <img src="../i ...

  7. 安装Nginx+uWSGI+Django环境

    Ubuntu Server 12.04 安装Nginx+uWSGI+Django环境 今天要介绍的是利用APT源直接apt-get install安装配置我们所需要的环境,首先按惯例先安装MySQL和 ...

  8. Android系统onKeyDown监控/拦截/监听/屏蔽返回键、菜单键和Home键

    在Android系统中用来显示界面的组件(Component)为Activity,也就是说只有重写Activity的onKeyDown方法来监控/拦截/屏蔽系统的返回键(back).菜单键(Menu) ...

  9. GC之一--GC 的算法分析、垃圾收集器、内存分配策略介绍

    一.概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本 ...

  10. bat命令之for命令详解

    ______________版主提醒____________________________ 为了避免影响技术讨论.提高看帖的舒适性,请大家不要在此帖下跟无实质内容的口水帖,特别是纯顶.纯支持.纯感谢 ...