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

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. ARM各种版本号知识以及型号的发展（三星为例）

    1.ARM型号的发展历史 2.单片机.工业上一般使用RTOS(实时操作系统),Linux.Android用在影音娱乐等对实时性要求没那么高的场合: 3.ARM内核版本号和Soc版本号是由ARM确定的, ...

  2. 黄聪：get_posts 函数 | wordpress

    get_posts 函数,简单的来讲是 get_post 的复数新形势,但因为是文章多篇提取,所以使用方法上却略有不同,支持众多参数选择需要提取的文章,在 CMS 主题中经常被用到,当然如果你对 Wo ...

  3. API 双方认证探讨

    开放 api 已是大势所趋.而 api 这种东西有个特点就是覆水难收.一旦公开出去了,被大量用户使用,一旦修改,就会让广大用户都掉坑里.所以,api 在设计之初就要尽量考虑周全,并预留扩展可能. 目前 ...

  4. 发现木马C:\windows\system32\FastUserSwitchingCompatibilityex.dll

    而且用安全狗还隔离不了

  5. Installing Redis on Ubuntu

    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable sudo ...

  6. 无状态服务（stateless service）

    一.定义 无状态服务(stateless service)对单次请求的处理,不依赖其他请求,也就是说,处理一次请求所需的全部信息,要么都包含在这个请求里,要么可以从外部获取到(比如说数据库),服务器本 ...

  7. iOS推送通知的实现步骤

    一.关于推送通知 来源:http://blog.csdn.net/enuola/article/details/8627283 推送通知,也被叫做远程通知,是在iOS 3.0以后被引入的功能.是当程序 ...

  8. 性能测试工具之Gatling

    转载:http://ningandjiao.iteye.com/blog/2004579 Gatling一直是久闻其名但是未得机会运用,正好最近有需求做性能测试,于是趁此机会熟悉了一下,可以说,这是目 ...

  9. 三种主流的WebService实现方案（REST/SOAP/XML-RPC）简述及比较

    目前知道的三种主流的Web服务实现方案为:REST:表象化状态转变 (软件架构风格)SOAP:简单对象访问协议 XML-RPC:远程过程调用协议 简单介绍: REST:表征状态转移(Represent ...

  10. ubuntu 修改静态IP和DNS

    1.修改配置文件/etc/network/interfacesroot@ubuntu:~# sudo vi /etc/network/interfaces 添加以下内容:auto eth0       ...