`
忧里修斯
  • 浏览: 437118 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js动态增加、删除行

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MyHtml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
    	function rowindex(tr)
			{
				var Browser = new Object();

				Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument != 'undefined');
				Browser.isIE = window.ActiveXObject ? true : false;
				Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != - 1);
				Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != - 1);
				Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != - 1);
			  if (Browser.isIE)
			  {
			    return tr.rowIndex;
			  }
			  else
			  {
			    table = tr.parentNode.parentNode;
			    for (i = 0; i < table.rows.length; i ++ )
			    {
			      if (table.rows[i] == tr)
			      {
			        return i;
			      }
			    }
			  }
			}

			/**
			 * 新增一个价格阶梯
			 */
			function addLadder(obj)
			{
				
			  var src  = obj.parentNode.parentNode;
			  
			  var idx  = rowindex(src);
			  var tbl  = document.getElementById("groupTable");
			  var row  = tbl.insertRow(idx + 1);
			  var cell = row.insertCell(-1);
			  cell.innerHTML = '';
			  var cell = row.insertCell(-1);
			  cell.innerHTML = src.cells[1].innerHTML.replace(/(.*)(addLadder)(.*)(\[)(\+)/i, "$1removeLadder$3$4-");;
			}
			
			/**
			 * 删除一个价格阶梯
			 */
			function removeLadder(obj)
			{
			  var row = rowindex(obj.parentNode.parentNode);
			  var tbl = document.getElementById('groupTable');
			
			  tbl.deleteRow(row);
			}
		</script>

	</head>

	<body>
		<table id="groupTable" width="100%" cellpadding="0" cellspacing="0"
			class="list_box" style="background-color: #fff;">
			<tr>
				<td align="right">
					<b>价格阶梯:</b>
				</td>
				<td>
					数量达到
					<input type="text" name="ladder_amount[]" value="0" size="8" />
					&nbsp;&nbsp; 享受价格
					<input type="text" name="ladder_price[]" value="0" size="8" />
					<a href="javascript:;" onclick="addLadder(this)"><strong>[+]</strong>
					</a>
				</td>
			</tr>
		</table>
	</body>
</html>
分享到:
评论

相关推荐

    JS动态增加删除行

    在JavaScript(JS)编程中,动态增加和删除行是一项常见的任务,特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户...无论使用哪种方法,理解和掌握动态增加删除行的原理对于任何前端开发者都是必要的。

    js 动态增加删除行hwh

    "js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM(Document Object Model)节点的能力。DOM是网页内容的结构化表示,通过它可以方便地对页面元素进行增删改查。 首先,让我们深入了解如何使用...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    js动态增加表格行

    js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    JS动态增加和删除行

    通过JS实现了动态的增加一行或是删除一行,可以进行多行数据录入。

    JS对表格的动态增加删除行 (多个demo)

    这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明: 1. **HTML表格基础**: HTML表格由`&lt;table&gt;`元素定义,行`&lt;tr&gt;`,列`&lt;td&gt;`(或`&lt;th&gt;`...

    动态增加删除行.html

    综上所述,动态增加删除行是前端开发中常见的需求,涉及到HTML、JavaScript、CSS以及可能的数据管理和用户交互设计。实现这一功能需要理解DOM操作,熟悉事件处理,并且能够根据应用的具体需求进行适当的优化和扩展。...

    js实现动态增加和删除表格的行和列。实例

    js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例

    d3.js插件 拓扑图 动态增加、删除节点

    本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图,并实现节点的动态增加与删除功能。 拓扑图是一种图形表示法,常用于描绘网络、系统或流程中的元素及其相互关系。在d3.js中,我们可以利用其强大的数据绑定和...

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据单元格)元素组成。如果...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    js动态增加,删除行,可运行

    web端js动态增加删除表格行,双击打开即可看效果

    Ajax动态表格,可适时添加行、删除行、复制行

    本话题将深入探讨如何实现一个动态表格,用户可以适时添加、删除和复制表格中的行。 首先,我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器,获取或提交数据,然后使用JavaScript处理这些...

    js动态添加行

    以下是关于"js动态添加行"的详细解释: 1. **理解DOM**: DOM是HTML或XML文档的结构化表示,它将网页内容转化为一个树状结构,使得我们可以用编程方式访问和修改页面元素。在JavaScript中,`document`对象提供了与...

    纯javascript增加删除表格行

    4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...

    页面动态增加行

    综上所述,"页面动态增加行"和"动态删除行"涉及JavaScript对DOM的操作,事件监听以及用户交互。通过这些技术,开发者可以创建更具活力和响应性的网页应用,提升用户的交互体验。在实际项目中,这通常与Ajax异步通信...

    可以动态增加table行的javascript代码

    * 1、&lt;script language="javascript" src="js/addContentRow.js"&gt; * 2、 * &lt;!-- 附件部分 --&gt; * * &lt;tr&gt;&lt;/tr&gt; * * * &lt;a href="javascript:addpicrow();"&gt;增加 * &lt;a href="javascript:...

    常用的js动态增加(删除)table数据行的功能

    在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`...

Global site tag (gtag.js) - Google Analytics