简单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 ...
随机推荐
- ARM地址映射
转自:http://blog.csdn.net/a3163504123/article/details/10958229 重映射之后,一般原来的地址依然有效.也就是说,可能两个地址,对应一个存储单元. ...
- 206. Reverse Linked List
反转链表 注意是借用 假的头节点,这样算法判断开始和结束,就好很多了. 借用头插法. []dummy/head [] [] [] [] head curr ==== class Solution ...
- C# ASP.NET 开发指引简要
推荐学习交流社区:博客园http://www.cnblogs.com/ 里面有很多技术.职业圈子等信息的分享,新手必逛社区. 电子书等资源下载:csdn下载 http://download.csdn. ...
- 设置session的生存时间
1.最有效的方法 修改php.ini中 #session的超时时间 session.gc_maxlifetime = 1440 2.通过php去修改这个值 $Lifetime = 3600; $S ...
- Chrome每次打開都要打開123.sogou.com
剛開始還以為中毒了,又是殺毒又是掃描的,最後發覺,原來就是chrome的一個設置被改了. Chrome->設置->啟動時 : 選打开特定网页或一组网页->設置網頁 , 將其中的123 ...
- java多线程之生存者与消费者(Java编程思想)
1.通过wait() 与 Notify实现 package Produce; import java.util.concurrent.ExecutorService; import java.util ...
- spring mvc视频
视频内容: 1.下载spring mvc以及spring mvc示例演示http://pan.baidu.com/s/1kTHRfDH 2.配置完善&初步探究控制器拦截http://pan.b ...
- c# winform快捷键设置
设置 Form 的 KeyPreview=true 然后在Form 的案件事件里判断按钮类型进行分别调用就可以了 private void Form1_KeyDown(object sender, K ...
- 解决docker不能下载镜像
试了很多办法.用ss,vpn,都不行. 修改 /etc/default/docker的方式貌似在 1.12不好使了.最后找到和这个办法 http://blog.csdn.net/gsying1474/ ...
- Jmeter+jenkins接口性能测试平台实践整理（二）
本篇为Jmeter+jenkins+Ant方式执行性能测试 1.设置JDK,ANT环境变量: 2.build.xml文件: <?xml version="1.0" encod ...