简单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="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>

 

转载于:https://www.cnblogs.com/godtrue/p/3640831.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Yii权限管理工具Srbac使用小结

一、关于Srbac Srbac是基于Yii 框架的 RBAC&#xff08;基于角色的访问控制&#xff09; 插件模块&#xff0c;用于帮助Yii开发人员更方便地进行权限控制&#xff0c;在实际应用过程中也比较方便。 二、安装配置Srbac 在Yii的官方网站的Extensions中已经收录了Srbac插件&#x…

概念concept和requires ---C++ 20

概念concept和requires —C 20 concept concept简化了模板编程的难度 我们可以使用**concept定义模板形参的约束条件T** 模板实力替换T后必须满足std::is_integral_v<C>;为true 例子: requires关键字可以直接约束模板形参T 如下: template <class C> concept …

向DataGridView中添加新的一行数据,可以添加到最后一行或作为第一行

我的开发环境&#xff1a;Microsoft Visual Studio .net 2005 这个程序是Windows Forms Application 新建一个Windows Forms Application项目&#xff0c;打开Form1&#xff0c;在窗体上放一个DataGridView控件和Button,在DataGridView的Columns中添加两列&#xff0c;Name分别…

DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

.net 2005下的Windows Form Application,一个DataGridView控件和4个Button&#xff0c;界面设置如下&#xff1a; 代码如下&#xff0c;有注解&#xff0c;相信大家都看得明白&#xff1a; using System;using System.Collections.Generic;using System.ComponentModel;using S…

类型萃取类型检查 Type-Traits LibraryType Checks --- C++20

类型萃取:类型检查 Type-Traits Library:Type Checks — C20 Type-Traits library 在C11的时候就已经发布,但依然随着C版本在不断更新 类型检查 Type Checks 每种类型就是十四种主要类型之一 主要类型 template <class T> struct is_void; template <class T>…

模板元编程 Template Metaprogramming--- C++ 20

模板元编程(一) Template Metaprogramming— C 20 在编译期进行类型操作 举个例子: std::move在概念上应该这样实现(实际并不是这么做的): static_cast<std::remove_reference<decltype(arg)>::type&&>(arg);意义上,std::move首先获取它的参数arg,推断…

模板元编程(二) Template Metaprogramming ---C++ 20

模板元编程(二) Template Metaprogramming —C 20 现在我们介绍参数与模板参数混合使用 先看一下例子: #include <iostream>int power(int m, int n) {int r 1;for (int k 1; k < n; k) r * m;return r; }template <int m, int n> struct Power {static in…

让窗体获得焦点,一定会有您用到的时候

开发环境&#xff1a;Visual Studio .NET 2005 下的Windows Form Application 应用场景: 当我们有个窗体中的数据发生了变化而此窗体又没有获得焦点(不是用户操作的当前窗口)的时候&#xff0c;我们希望它获得焦点&#xff0c;这样用户就可以立刻发现它上面的数据发生了变化。…

容器和算法的改进 --- C++20

容器和算法的改进 — C20 C 20对容器和算法有很多的改进 std::vector 和std::string支持constexpr所有容器支持consistent container erasure , contains新的算法移动元素 std::shift_left可以检查 std::string 的前缀和后缀 支持 constexpr 的容器和算法 C 20的std::vecto…

CodeSmith基础(二)

本文将介绍CodeSmith与数据库进行交互生成相应的存储过程&#xff0c;本例使用的数据库为SQL Server 2000。 在与数据库进行交互时&#xff0c;我们使用到了一个CodeSmith自带的组件SchemaExplorer&#xff0c;利用这个组件我们可以访问数据库的数据表、存储过程、视图等…

[Android]使用ViewPager实现图片滑动展示

在淘宝等电商的APP首页经常能看到大幅的广告位&#xff0c;通常有多幅经常更新的图片用于展示促销信息&#xff0c;如下图所示&#xff1a; 通常会自动滚动&#xff0c;也可以根据手势滑动。我没有研究过人家的APP是通过什么实现的&#xff0c;可能有第三方已经封装好的控件可以…

c#获取当前应用程序所在路径

一、获取当前文件的路径1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName 获取模块的完整路径&#xff0c;包括文件名。2. System.Environment.CurrentDirectory 获取和设置当前目录(该进程从中启动的目录)的完全限定目录。3. System.IO.…

requires表达式 ---C++ 20 模板

requires表达式 —C 20 模板 requires还可以接一个表达式,该表达式也是一个纯右值表达式,表达式为true时满足约束条件,false则不满足约束条件 requires表达式的判定标准:对requires表达式进行模板实参的替换,如果替换之后出现无效类型,或者违反约束条件,则值为false,反之为tr…