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

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. QueryRunner的API

    org.apache.commons.dbutils Class QueryRunner java.lang.Object org.apache.commons.dbutils.AbstractQue ...

  2. HDU 3001 Traveling（状压DP）

    题目大意:10个点的TSP问题,但是要求每个点最多走两边,不是只可以走一次,所以要用三进制的状态压缩解决这个问题.可以预处理每个状态的第k位是什么. 原代码链接:http://blog.csdn.ne ...

  3. CF 445A 简单DP

    今天早上找一道题的bug,还是找不出来,下午刷了几道水题,晚上准备回家的事, 然后本来想打CF的,一看,数学场,不打了. 这道题的题意: 给出一个序列,每次你可以从这个序列里面选择一个数ak,删除,然 ...

  4. RN项目搭建

    一.安装JDK 由安装包引起,你可以尝试一下新包 注意安装路径要不同 或者重新安装Windows Installer 运行CMD 1.输入 sfc /SCANNOW 回车 2.完成后输入 msiexe ...

  5. centos更改默认语言

    centos7以下版本: vim /etc/sysconfig/i18n 7以上版本:

  6. C语言中，数组名作为参数传递给函数时，退化为指针

    C语言中,数组名作为参数传递给函数时,退化为指针   C语言中,数组名作为参数传递给函数时,退化为指针:需要数组大小时, 需要一个参数传数组名,另一个传数组大小. 数组名做函数参数时,就相当于指针了. ...

  7. hadoop对于压缩文件的支持及算法优缺点

    hadoop对于压缩文件的支持及算法优缺点   hadoop对于压缩格式的是透明识别,我们的MapReduce任务的执行是透明的,hadoop能够自动为我们 将压缩的文件解压,而不用我们去关心. 如果 ...

  8. Python进阶08 异常处理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 本文特别感谢kylinfish的纠正,相关讨论见留言区. 异常处理 在项目开发中, ...

  9. 转: Ubuntu 安装字体方法

    命令安装:   以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...

  10. 使用Jenkins搭建持续集成服务

    1. 什么是持续集成 持续集成 (Continuous Integration, 简称 CI) 是软件工程中的一种实践, 用于将开发人员不同阶段的工作成果集成起来, 通常一天之中会进行多次. 持续集成 ...