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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>例子</title>
  6.         <script language="javascript">
  7.             var i = 0, j = 1; //行号与列号
  8.             var oNewRow; //定义插入行对象
  9.             var oNewCell1, oNewCell2,oNewCell3; //定义插入列对象
  10.             //添加下一行
  11.             function addNextRow() {
  12.                 i = document.getElementById("MyTable").rows.length;
  13.                 oNewRow = document.getElementById("MyTable").insertRow(i);
  14.                 oNewRow.id = j;
  15.                 //添加第一列
  16.                 oNewCell1 = document.getElementById("MyTable").rows[i].insertCell(0);
  17.                 oNewCell1.innerHTML = "<input name='id_' type='text' style='width: 99%' id='investorName" + j + "'/>";
  18.                 //添加第二列
  19.                 oNewCell2 = document.getElementById("MyTable").rows[i].insertCell(1);
  20.                 oNewCell2.innerHTML = "<input name='name_' type='text'  style='width: 99%' id='investorProportion" + j + "'/>";
  21.                 //添加第三列
  22.                 oNewCell3 = document.getElementById("MyTable").rows[i].insertCell(2);
  23.                 oNewCell3.innerHTML = "<img src='images/button/ico/sc.png' name=del"+ j + " onClick='delCurrentRow(" + j + ");' width='16' height='16' />";
  24.                 j++;
  25.             }
  26.             //删除当前行
  27.             function delCurrentRow(j) {
  28.                 with (document.getElementById("MyTable")) {
  29.                     for ( var i = 0; i < rows.length; i++) {
  30.                         if (rows[i].id == j) {
  31.                             deleteRow(i);
  32.                         }
  33.                     }
  34.                 }
  35.             }
  36.         </script>
  37.     </head>
  38.     <body>
  39.             <table id="MyTable" width="100%" border="0" cellpadding="0" cellspacing="0">
  40.                 <tr>
  41.                     <td width="47%">ID号</td>
  42.                     <td width="47%">姓名</td>
  43.                     <td><img src="data:images/button/ico/plus.png" name="addRow_" onclick="addNextRow();" width="16" height="16" /></td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td><input name="id_" type="text" style="width: 99%" id="id"/></td>
  47.                     <td><input name="name_" type="text" style="width: 99%" id="name"/></td>
  48.                     <td>&nbsp;&nbsp;</td>
  49.                 </tr>
  50.             </table>
  51.     </body>
  52. </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. 328. Odd Even Linked List

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  2. (MVVM) button enable 时，UI没有被刷新。

    if (!this.CanExecuteSubmitButton) { this.CanExecuteSubmitButton = true; CommandManager.InvalidateReq ...

  3. 内存修改console

    #include <stdio.h> #include <windows.h> #include <winuser.h> int main() { int cur_ ...

  4. 分页写入文件，第二次分页前一定要关闭IO流啊。。否则文件写不全。。- -粗心

  5. NeHe OpenGL教程 第八课：混合

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  6. MHI ,运动历史图像的的获取[下载自CSDN]

    #include "cv.h" #include "highgui.h" #include "stdlib.h" #include &quo ...

  7. laravel项目报错DecryptException：The MAC is invalid.

    1.问题描述 把Laravel项目上传至服务器,本地数据库导出再导入至服务器数据库,一切运行正常,但是当进行用户登录时报错 DecryptException in compiled.php line ...

  8. Tornado

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  9. java中的浅拷贝与深拷贝

    浅拷贝: package test; class Student implements Cloneable { private int number; public int getNumber() { ...

  10. 使用NodeJS将XML解析成JSON及性能比较

    并不是所有的API都是以JSON格式返回的.我们有时侯不得不处理一些XML.幸运的是有一个NodeJS模块 xml2js 可以帮你做这件事.   比如,我们要处理下面这段XML   <?xml ...