<style type="text/css">
body{
font-size: 13px;
}
table{
text-align: center;
border:solid 1px #eee;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
td{
border: solid 1px #eee;
width: 15%;
}
table{
margin-bottom: 0px;
margin-top: 0px;
}
</style>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=1;
//动态添加一行
$("#btn").click(function(){
var $tr = $("<tr>"
+"<td>" + i + "</td>"
+"<td><input name =''/></td>"
+"<td><input name =''/></td>"
+"</tr>");
//$tr.appendTo($("#mark"));
$("#mark").append($tr);
$("tr:gt(1):not(:last):odd").css("background-color", "#FFFFF2");
$("tr:gt(1):not(:last):even").css("background-color", "#FBF5E6");
$("#submit").css("display","block");
i++;
});
//删除表格中最后一行
$("#btnDel").click(function(){
$("#content tr:gt(1):last").remove();
});
});
</script>
<body>
<form action="" method="post">
<table align="center" id="content">
<tr>
<td colspan="3" style="text-align: right;">
<button id="btn">add</button>
<button id="btnDel">delete</button>
</td>
</tr>
<tr id="mark">
<td>id</td>
<td>name</td>
<td>desc</td>
</tr>
</table>
<table align="center" id="sub">
<tr>
<td colspan="3" style="text-align: left;"><input type="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>
分享到：
相关推荐
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> ...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
这篇博客“jquery 添加、删除表格”显然关注的是如何使用jQuery来操作HTML表格，实现动态添加和删除行的功能。这在构建数据驱动的Web应用中尤其常见，比如用户管理、订单处理或任何需要展示和编辑表格数据的场景。 ...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能，这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的...
本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行，这在数据展示和用户交互中非常常见，特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前，我们需要确保网页已经引入了jQuery库。...
首先，让我们讨论如何使用jQuery添加新行到表格。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示，而单元格则由`<td>`标签定义。通过jQuery，可以动态创建这些元素并将其插入到表格中。以下是一个简单的...
在JavaScript和jQuery的世界里，动态地添加和删除DOM元素是常见的需求，特别是在处理表格数据时。本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常...
本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...
在这个"jQuery表格添加行数据代码"中，我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件，如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先，`...
本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例，同时也将涵盖一种使用原生JavaScript实现的方法。 首先，jQuery动态增加表格行通常涉及以下几个步骤： 1. **创建HTML结构**：一个基本的表格由`...
本案例主要探讨如何利用jQuery为HTML表格动态添加行并实现删除功能，这对于构建交互性强的数据展示页面至关重要。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`元素开始，内部包含`<tr>`...
本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能，它允许用户动态地在表格中添加和删除行，大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先，我们需要理解...
例如，以下代码演示了使用JQuery添加和删除表格行： ```javascript // 使用JQuery添加新行 function addNewJQuery() { var objMyTable = $('#tbl'); objMyTable.append('<tr><td>...
### jQuery 动态添加删除知识点解析 #### 一、概述 在Web开发中，动态地对页面元素进行增删操作是十分常见的需求。利用jQuery框架，开发者可以方便地实现这一功能。本文将根据提供的示例代码，深入分析如何使用...
二、jQuery添加行 要使用jQuery动态添加表格行，可以编写一个函数，根据需要插入新的行数据。以下是一个简单的示例： ```javascript function addRow(name, age) { var newRow = $("<tr><td>" + name + "</td><td...