<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
<!--
function addRow() {
var row = document.getElementById("modelRow");
var ln = row.nextSibling;
var ib = document.getElementById("insertBefore");
var n = row.cloneNode(true);
n.setAttribute("id", null);
var nln = ln.cloneNode(true);
row.parentNode.insertBefore(n, ib);
row.parentNode.insertBefore(nln, ib);
}
function deleteRow() {
var ib = document.getElementById("insertBefore");
var line = ib.previousSibling;
var row = line.previousSibling;
if (row.id == "modelRow") {
alert('这是最后一项，不能删除');
return;
}
ib.parentNode.removeChild(line);
ib.parentNode.removeChild(row);
}
//-->
</script>
<body>
<div align="center">
<input type="button" name="Submit" value="增加一项" onclick="addRow()">
<input type="button" name="Submit3" value="减少一项" onclick="deleteRow()">
<br>
</div>
<table width="75%" height="135" border="0" align="center"
cellpadding="0" cellspacing="0" id="ice">
<tr>
<td width="43%"><div align="center">
<font color="#000000"><strong>商品名称</strong></font>
</div></td>
<td width="28%"><div align="center">
<font color="#000000"><strong>数量</strong></font>
</div></td>
<td width="29%"><div align="center">
<font color="#000000"><strong>单价</strong></font>
</div></td>
</tr>
<tr>
<td height="30" colspan="3">
<hr align="center" width="80%" size="1" noshade>
</td>
</tr>
<tr id="modelRow">
<td><div align="center">
<input name="textfield" type="text" value="aaaaaa">
</div></td>
<td>
<div align="center">
<input name="textfield2" type="text" value="1" size="12">
</div>
</td>
<td><div align="center">
<input name="textfield4" type="text" value="3" size="10">
</div></td>
</tr>
<tr>
<td height="30" colspan="3">
<hr align="center" width="80%" size="1" noshade>
</td>
</tr>
<tr>
<td>
<div align="center">
<input name="textfield" type="text" value="aaaaa">
</div>
</td>
<td><div align="center">
<input name="textfield2" type="text" value="1" size="12">
</div></td>
<td><div align="center">
<input name="textfield4" type="text" value="2" size="10">
</div></td>
</tr>
<tr>
<td height="30" colspan="3"><hr align="center" width="80%"
size="1" noshade></td>
</tr>
<tr id="insertBefore">
<td height="30"> </td>
<td height="30"> </td>
<td height="30"> </td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"> </td>
<td height="30"> </td>
</tr>
<tr>
<td height="30" colspan="3"><div align="center">
<input type="button" name="Submit2" value="确定提交">
</div></td>
</tr>
</table>
</body>
</html>
相关推荐
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> ...
本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法，尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先，"jQuery动态添加删除编辑...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中，`add()`函数...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
总结来说，jQuery动态添加删除移动列表插件通过结合HTML、CSS和JavaScript，提供了用户友好的交互体验，使得用户能够动态地管理列表中的数据。这个插件对于构建数据展示、任务管理或者任何需要动态操作列表的应用...
本文将详细探讨"jQuery动态添加删除分组插件"，以及如何结合用户分组和Bootstrap框架来实现高效且用户友好的界面。 首先，我们需要理解jQuery动态添加删除分组插件的核心功能。这个插件主要用于创建可动态增删的...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
总结起来，通过结合HTML、CSS和jQuery，我们可以实现一个具有动态添加和删除行功能的表格。这个功能对于任何需要用户编辑和管理数据的网页应用都非常实用。在实际开发中，可以进一步优化和扩展这个功能，使其更加...
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...
二、jQuery添加行 要使用jQuery动态添加表格行，可以编写一个函数，根据需要插入新的行数据。以下是一个简单的示例： ```javascript function addRow(name, age) { var newRow = $("<tr><td>" + name + "</td><td...
"jQuery动态添加删除编辑标签代码"是一个示例项目，它展示了如何利用jQuery来创建一个功能丰富的选项卡系统，这个系统支持动态添加、删除和编辑标签。下面我们将深入探讨这一主题。 首先，jQuery动态添加标签的功能...
这是一款实用的jQuery动态添加删除移动列表插件，jQuery动态添加数据代码，jQuery动态删除数据代码。 引入js文件 [removed][removed] [removed][removed] [removed][removed] [removed][removed...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
Jquery动态添加和删除行，配合ajax的使用 可以更完美的实现无刷新更新
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
### jQuery 动态添加删除知识点解析 #### 一、概述 在Web开发中，动态地对页面元素进行增删操作是十分常见的需求。利用jQuery框架，开发者可以方便地实现这一功能。本文将根据提供的示例代码，深入分析如何使用...