最近学习jQuery，真的很强大，试了下表格行的动态增删，代码很简单，如下
<html>
<head><title></title></head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script><!--引入jQuery.js-->
<input type="text" id="enter" value="default" /><!--输入表格的内容，默认default-->
<input type="button" value="add" onclick="add()" /><!--增加一行-->
<input type="button" value="remove" onclick="remove()" /><!--删除最后一行-->
<table id="tbl" border="1" width="100px" >
<tr><th>Title</th></tr>
</table>
</body>
<script type="text/javascript">
var i = 0;
function add() {
i++;
var v = document.getElementById('enter').value;
var content = "<tr class="+i+"><td>"+v+"</td></tr>";
$('#tbl').append(content);
}
function remove() {
$('tr').remove('.'+i);
i--;
}
</script>
</html>
稍微改造一下即可实现删除指定行，不赘述。
分享到：
相关推荐
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
本文将深入探讨如何使用jQuery实现表格行的增删功能，以及多选删除的实现方法。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`（表格行）元素、`<td>`（表格数据）元素组成。例如...
这篇文章主要讲解了如何使用jQuery实现表格行的动态增加与删除，并对原有的实现进行了改进，以适应含有input元素的场景，避免了数据丢失的问题。在实际的网页开发中，这种功能非常常见，例如在表单编辑或者数据管理...
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
本主题将深入探讨如何利用jQuery实现表格的增删功能，并结合Bootstrap框架创建美观的用户界面。 首先，jQuery提供了方便的DOM操作API，使得我们可以轻松地选择、添加或删除HTML元素。在表格操作中，我们通常会用到`...
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
本文将深入探讨如何使用jQuery实现表格的动态增删改功能，并结合后台数据进行绑定，以构建高效的数据展示和管理界面。 首先，我们要理解jQuery的核心概念。jQuery通过选择器（如$("#id")或$(".class")）来选取DOM...
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考，具体如下： 这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格...
本文将深入探讨如何在C#中利用GridView控件新增一行数据，并通过jQuery实现对数据的增删改查操作。 首先，让我们详细了解GridView控件。GridView是一个服务器控件，它能够以表格形式展示数据，如数据库中的记录。它...
在实现表格增删时，应考虑响应式布局，确保在手机和平板等设备上也能良好显示和操作。 8. **数据绑定与状态管理**： 如果使用如AngularJS或Vue.js等MVVM框架，可以通过双向数据绑定轻松实现表格内容的实时更新。...
要实现对表格的增删查改，我们需要在JavaScript中操作这些元素。 **增加（Add）**: 在表格中添加新行，可以创建一个新的`<tr>`元素，并为其填充`<td>`元素，然后将其插入到表格的适当位置。例如，我们可以使用`...
本篇文章将详细讲解如何利用 jQuery 实现表格的增删查功能，以及添加光棒效果，使得用户交互更加友好。 首先，我们需要创建一个基本的 HTML 表格结构，用于展示数据： ```html 姓名 年龄 城市 操作 ...
本教程将深入探讨如何使用jQuery来实现表格的动态增加和删除功能，这在网页交互设计中非常常见，特别是对于数据展示和管理的页面。 首先，我们从标题"jQuery表格增加删除代码.zip"可以推断，这个压缩包包含的是一个...
《jQuery表格增删改查详解——基于Bootstrap框架》 在Web开发中，表格的数据操作是常见且重要的功能，包括添加、删除、修改和查询。本教程将深入探讨如何利用jQuery和Bootstrap框架实现这一功能，特别适合初学者...
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
"jquery表格增行，删行处理"这个主题聚焦于如何利用jQuery来动态地管理HTML表格中的行，包括添加新行和删除现有行。这对于构建数据驱动的交互式网页非常有用，比如在线表单或者数据展示页面。 首先，我们需要理解...
在本项目中，我们主要探讨如何使用PHP、MySQL、Bootstrap和jQuery这四个技术栈来构建一个功能完善的前后端系统，实现数据的增删查改（CRUD）操作。以下是关于这些技术及其相互配合的详细说明。 **PHP**： PHP是一种...
本文将详细讲解如何使用jQuery来操作表格，实现增删功能。 一、表格的基本结构 HTML表格由`<table>`标签定义，其中包含`<tr>`（行）标签，`<th>`（表头）和`<td>`（数据单元格）标签。例如： ```html 姓名 ...