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

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. datagridview 列位置 设置顺序与加载显示顺序不一致

    因为: dgv.AutoGenerateColumns = false;//禁止自动生成列 该属性是在 dgvJdmx.DataSource = dt; 之后设置的原因. 将两者调换,即可.

  2. 105. Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. ============== 基本功: 利用前序和 ...

  3. JavaScript-日期格式化（一）

    /** * 日期格式化, * @param date 要格式化的日期 * @param pattern 进行格式化的模式 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), * d ...

  4. 用radio控制<tr>的隐藏和显示问题

    jsp页面代码 <tr> <th nowrap="nowrap" width="10%" height="50px" st ...

  5. 安装Nginx+uWSGI+Django环境

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

  6. c++学习-数组

    int a[10]; //是个元素,在windows下回报错,linux会输出一个随机数 int a[10]={1,2}; //初始化,其他的为0 数组越界: 为了调高效率, 编译器不会对数组越界做检 ...

  7. Python标准库04 文件管理 (部分os包，shutil包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在操作系统下,用户可以通过操作系统的命令来管理文件,参考linux文件管理相关命令 ...

  8. Eclipse中对Python代码自动格式化！

    在Eclipse中使用PyDev发现无法进行代码格式化,使用通常的"Ctrl+Shift+F"快捷键,没有任何变化,难道不能对python代码格式化了吗? 通过下面设置,就可以每次 ...

  9. rubymine配置 rspec

    If you go in Run > Edit Configurations... And select All Specs in <Your Project> you'll see ...

  10. perl处理含有中文字符的json编码

    例子:1. 有php的 json函数生成的中文串 [root@tts177:/tmp]$/opt/php/bin/php -r 'echo json_encode(Array("a" ...