简单JS实现对表的行的增删
这段代码非常的简单，仅仅作为自己的一个小小的记录！
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> </td>
</tr>
</table>
</body>
</html>
简单JS实现对表的行的增删的更多相关文章
- 一个简单的零配置命令行HTTP服务器
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- js基础 1.简单js 语法 关键字 保留字 变量
简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...
- http-server:一个简单的零配置命令行的http服务器
首先简介一下http-server: http-server是一个简单的零配置命令行http服务器,他对于生产使用来说足够强大,他是简单和可删节足以用于测试,足够简单易用,而且可用于本地开发 1.首先 ...
- [转] 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
[From] http://www.cnblogs.com/lucker/p/4108838.html http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本
<zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本 人脸识别.车牌识别是opencv当中 ...
- x264源代码简单分析：x264命令行工具（x264.exe）
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
随机推荐
- chmod 权限777 是什么意思（Unix和Linux的各种操作系统下）
在Unix和Linux的各种操作系统下,每个文件(文件夹也被看作是文件)都按读.写.运行设定权限.例如我用ls -l命令列文件表时,得到如下输出:-rw-r--r-- 1 bu users 2254 ...
- 【log】log4j
常用log4j.properties配置文件 log4j.rootLogger = info,console #指定serviceImpl层 日志输出 log4j.logger.com.sms.ser ...
- 使用水晶报表更新后出现“值不能为 null。 参数名: inputString”
简单记录一下: 如果更新完水晶报表相关页面可能在原来页面刷新会出现错误:"值不能为 null. 参数名: inputString",如图:
- （四）java程序基本组成
一个基本的java程序一般包括几个部分,分别是程序所在的包名.程序中用到的其他包的路径.程序的类.类中的方法.变量和字面量. package demo; import java.util.Date; ...
- JavaScript中对于闭包的理解
1.什么是闭包? 闭包,官方对闭包的解释是:一个拥有很多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 闭包的特点: (1).作为一个函数变量的一个引用,当函 ...
- hiho #1014 : Trie树
#1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...
- mysql函数计算地表两点间距离
DELIMITER $$ CREATE FUNCTION `test`.`getDistance`(LatBegin FLOAT(10,4), LngBegin FLOAT(10,4), LatEnd ...
- iframe替代方案
自己写一个pagelet框架.封装成JSP的Taglib. <tms:view header="common-header" footer="common-foot ...
- get/close not same thread Druid 连接池一个设置
我就郁闷了,1000W+数据审核每次总是到一半就出这么个错,仔细找找原来是一个配置项的小问题,removeAbandonedTimeout 这个代表你从连接池取出一个连接多少秒之后你还没还回来,那就强 ...
- 词典对象 NSDictionary与NSMutableDictionary
做过Java语言或者 C语言开发的朋友应该很清楚关键字map 吧,它可以将数据以键值对儿的形式储存起来,取值的时候通过KEY就可以直接拿到对应的值,非常方便,是一种非常常用的数据结构.在Objecti ...