简单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>&nbsp;&nbsp;</td></tr></table>                            </body>
</html>

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

简单JS实现对表的行的增删相关推荐

从敲下一行JS代码到这行代码被执行，中间发生了什么？
前言我们每天都在写JS,你是否想过,计算机是怎么识别你的这一行代码,并且执行相应指令?本篇文章为你讲述从敲下一行JS代码到这行代码可以被执行算出正确的结果,都经历了什么. 编译学过计算器基础的,即 ...
简单JS实现走马灯效果的文字(无需jQuery)
效果类似:(抱歉,图片是静态的) 写一段html,需要走马灯上下跳动的内容,但每次只显示一行: <hr size="0" align="center" s ...
html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) var high ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
JS组件系列--BootstrapTable 行内编辑解决方案:x-editable 参考文章: (1)JS组件系列--BootstrapTable 行内编辑解决方案:x-editable (2)ht ...
python的objectproperty,python中property(lambda self: object())简单解释，,最后4行lambda
python中property(lambda self: object())简单解释,,最后4行lambda 最后4行lambda.问题是:如何运作?它们的含义和结果是什么?您能否以简单的方式显示该声 ...
js list操作_使用 Node.js 实现一个命令行 todo-list（1）- 基本功能
功能介绍为了熟悉 Node.js,使用 Node.js 制作一个命令行小工具,项目仓库:https://github.com/FuZhouJohn/node-todo,先来介绍一下功能: 添加任务: ...
x264源代码简单分析：x264命令行工具（x264.exe）
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
JavaScript JS 如何定义多行文本
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...

简单JS实现对表的行的增删

简单JS实现对表的行的增删相关推荐

最新文章

热门文章