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

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. NAND flash和NOR flash的区别详解

    我们使用的智能手机除了有一个可用的空间(如苹果8G.16G等),还有一个RAM容量,很多人都不是很清楚,为什么需要二个这样的芯片做存储呢,这就是我们下面要讲到的.这二种存储设备我们都统称为“FLASH ...

  2. 利用NTFS权限与虚拟目录，在IIS 6.0的默认FTP站点中做用户隔离。

    默认FTP站点为不隔离用户站点,利用NTFS权限设置,达到仅能访问指定目录效果. 是否允许匿名连接 FTP站点主目录:站点范围内有没有用户需要上传,有的话,要勾选“写入”:具体用户使用NTFS还给予写 ...

  3. SparkSQL项目中的应用

    Spark是一个通用的大规模数据快速处理引擎.可以简单理解为Spark就是一个大数据分布式处理框架.基于内存计算的Spark的计算速度要比Hadoop的MapReduce快上100倍以上,基于磁盘的计 ...

  4. PLSQL_性能优化系列16_Oracle Tuning Analyze优化分析

    2014-12-23 Created By BaoXinjian

  5. OAF_EO系列7 - OAException异常处理及实现（案例）

    2014-06-12 Created By BaoXinjian

  6. AD7190学习笔记

    1 建议SCL空闲时会高电平. 2复位:上电后连续输入40个1(时钟周期)复位到已知状态,并等待500us后才能访问串行接口,用于SCLK噪音导致的同步. 3单次转换与连续转换(连续读取):每次转换是 ...

  7. MYSQL批量插入数据库实现语句性能分析

    假定我们的表结构如下 代码如下   CREATE TABLE example ( example_id INT NOT NULL, name VARCHAR( 50 ) NOT NULL, value ...

  8. OperationResult

    public class OperationResult<T> { private readonly ConcurrentDictionary<string, T> _valu ...

  9. git分支管理和stash

    1 创建分支$ git branch 分支名 2切换到分支$ git checkout 分支名 3查看提交git log --oneline --decorate --graph --all 4 轻量 ...

  10. Informix如何释放异常的锁资源

    问题 在Informix数据库中,锁的使用和释放是自动完成的.但在某些异常情况下,当前台程序退出(正常或异常)后,相应在数据库中的会话没有终止,其占有的资源(主要是锁)没有被释放,影响了其他用户的使用 ...