简单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 ...
随机推荐
- ORA-04031案例一则
ORA-04031这个错误,几乎每一个专业的DBA都遇到过.这是一个相当严重的错误,Oracle进程在向SGA申请内存时,如果申请失败,则会报这个错误.大部分情况下是在向SGA中的shared poo ...
- css设置背景图片，ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- 一个Oracle触发器的示例
CREATE OR REPLACE TRIGGER WoStateChange AFTER UPDATE on csdbuser.T_PD_WorkOrder for each row declare ...
- JavaScript中回调函数的使用
在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数. ...
- DBA_Oracle LogMiner分析重做和归档日志（案例）
2014-08-19 Created By BaoXinjian
- ndk android studio万年坑
先说javah万年坑 javah语法: Usage: javah [options] <classes> where [options] include: -o <file> ...
- AES对称加密算法原理（转载）
出处:http://www.2cto.com/Article/201112/113465.html 原著:James McCaffrey 翻译:小刀人 原文出处:MSDN Magazine Novem ...
- Java多线程之阻塞I/O如何中断
阻塞的I/O线程在关闭线程时并不会被打断,需要关闭资源才能打断. 1.执行socketInput.close();阻塞可中断.2.执行System.in.close();阻塞没有中断. package ...
- oracle 树形SQL
oracle树形sql查询实例分析 通过此SQL语句 [sql] select * from tree 查看原始数据如下: 我们要想得到如下的一个树形查询结果如下图所示(包含 R ...
- linux secureCRT utf-8编码显示
secureCRT 会话选项-终端-外观-字符编码: 下拉选择UTF-8 关闭当前secureCRT,另开一个新的让设置生效,显示正常.