<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动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
在网页开发中，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实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
这篇博客“jquery 添加、删除表格”显然关注的是如何使用jQuery来操作HTML表格，实现动态添加和删除行的功能。这在构建数据驱动的Web应用中尤其常见，比如用户管理、订单处理或任何需要展示和编辑表格数据的场景。 ...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
总的来说，动态添加和删除表格行是前端开发中常见的功能，jQuery提供了简洁而强大的API来处理这类任务。通过理解并运用`add()`和`del()`函数，开发者可以轻松地实现这些功能，同时还能根据具体场景进行优化和扩展。
通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的HTML结构，包含一个表格和两个按钮，分别用于添加新行和删除选中行。表格通常由`<table>`、`...
本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例，同时也将涵盖一种使用原生JavaScript实现的方法。 首先，jQuery动态增加表格行通常涉及以下几个步骤： 1. **创建HTML结构**：一个基本的表格由`...
本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行，这在数据展示和用户交互中非常常见，特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前，我们需要确保网页已经引入了jQuery库。...
首先，动态添加删除表格通常基于HTML、CSS和JavaScript（或者更高级的库如jQuery、React、Vue等）进行构建。HTML用于创建表格的基本结构，CSS用于美化和布局，JavaScript则负责提供动态交互性。 在HTML中，`<table>...
例如，以下代码演示了使用JQuery添加和删除表格行： ```javascript // 使用JQuery添加新行 function addNewJQuery() { var objMyTable = $('#tbl'); objMyTable.append('<tr><td>...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
### jQuery 动态添加删除知识点解析 #### 一、概述 在Web开发中，动态地对页面元素进行增删操作是十分常见的需求。利用jQuery框架，开发者可以方便地实现这一功能。本文将根据提供的示例代码，深入分析如何使用...
本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能，它允许用户动态地在表格中添加和删除行，大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先，我们需要理解...
本篇文章将详细介绍两种jQuery实现动态添加删除行的方法。 ### 方法一：使用append()和remove() **添加行：** `append()`函数是jQuery中的一个方法，用于在元素末尾添加新的内容。在表格中添加新行，我们可以先...
通过创建新的DOM元素、添加事件监听器和应用CSS样式，我们可以轻松地实现动态增加、选中和删除表格行。这对于构建交互式Web应用，尤其是在处理表格数据时，是非常实用的工具。在实际项目中，你可以根据需要进一步...