使用Jquery的ajax方式实现对表格的删除和修改,类似于javaeye上的收藏管理中的标签管理功能。
$(function(){
$('.modify').click(function(){
//找到删除的按钮,并且得到当前按钮的值作为ID找出对应的TR
categoryId=$(this).attr('categoryId'); $('#'+categoryId+'_modify').removeClass("view"); $('#'+categoryId+'_view').addClass('view');
});
$('.save').click(function(){
categoryId=$(this).attr('categoryId');
//得到你修改后的文本框中的值。
newcategoryName=$('#'+categoryId+'_modify input').val();
//调用jquery的ajax方法发送POST请求,其中后面的函数是在请求成功完成后才会执行。
$.post("adminModifyProjectCategory.action", { projectCategoryName:newcategoryName ,projectCategoryId:categoryId},function(){
$('#'+categoryId+'_viewcategory').text(newcategoryName); $('#'+categoryId+'_modify').addClass("view");
$('#'+categoryId+'_view').removeClass('view');
});
});
$('.delete').click(function(){
if(confirm("确定删除?"))
{
id=$(this).attr('categoryId');
$.post("adminDeleteProjectCategory.action", {projectCategoryId :id },function(){
$('#'+id+'_view').remove();
});
}
});
});
以下是HTML的编写,写了两行,一行是显示用,另一行是编辑时用,编辑时用的那行是隐藏起来的。大家不要用jquery的hide功能来实现这个功能,因为浏览器要全部载入网页后才会执行jquery,所以你会看到先是全部显示了两行,然后有一行突然消失的现象。
<!-- 在每一行都有一个唯一的标示来表示,方便用jquery查找。是显示时的行-->
<tr id="${projectCategory.pcid }_view">
<td id="${projectCategory.pcid }_viewcategory"> <s:property value="#projectCategory.categoryName" />
</td>
<td>
<s:date name="#projectCategory.createdTime" format="yyyy-MM-dd"
nice="false" />
</td>
<td>
<a href="#" class="delete" categoryId="<s:property value="#projectCategory.pcid" />">删除</a>   <a href="#" categoryId="<s:property value="#projectCategory.pcid" />" class="modify"> 修改</a>
</td>
</tr>
<!-- 这行是点击修改后会出现的行,并且原先的行会隐藏。-->
<tr class="view" id="${projectCategory.pcid }_modify">
<td>
<input type="text" value="${projectCategory.categoryName }">
</td>
<td>
<s:date name="#projectCategory.createdTime" format="yyyy-MM-dd" nice="false" />
</td>
<td>
<a href="#" categoryId="<s:property value="#projectCategory.pcid" />"
class="save">保存</a>
</td>
</tr>
上面的代码是在项目中直接复制出来的,有点乱。

- 描述: 开始保存
- 大小: 7.2 KB

- 描述: 未开始保存
- 大小: 6.8 KB
分享到:
相关推荐
本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能,这些功能是许多Web应用程序的核心部分,特别是在数据管理界面中。 ### 增加 在jQuery中,增加表格行通常是通过动态创建`<tr>`元素并将其...
本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能,这对于创建交互式用户界面至关重要。 首先,让我们理解jQuery的核心概念。jQuery通过封装JavaScript API,使得选择元素、操作元素、添加事件监听器...
综上所述,"jQuery表格内容修改删除代码"是一个实用的前端开发工具,它利用jQuery的灵活性和Bootstrap的美观性,实现了表格的动态编辑和删除功能,为网页的数据展示带来了更多的可能性。开发者可以根据自己的需求...
本文将深入探讨“jQuery表格编辑添加删除行插件”,帮助开发者更好地理解和应用这个工具。 首先,我们要理解jQuery的核心价值在于它简化了DOM操作,使得JavaScript代码更加简洁和高效。在这款插件中,我们可以通过...
本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...
在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...
本文将深入探讨一个基于jQuery的表格控件,该控件实现了无刷新的添加、编辑、删除和统计功能,以VS2008为开发环境,利用Ajax技术,结合JSON数据格式,为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...
"jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案,它利用JavaScript库jQuery的强大功能,实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先,...
本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行,这在数据展示和用户交互中非常常见,特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前,我们需要确保网页已经引入了jQuery库。...
在这个名为"jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof"的压缩包中,重点是实现一个功能丰富的可编辑表格插件。这个插件允许用户直接在表格中进行内容修改和行的删除增加操作,...
虽然提供的文件没有直接提及插件,但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点,我们可以构建一个交互式的表格,不仅可以展示静态数据,还能响应用户操作,进行数据的动态更新和...
基本功能都已实现,本人能力有限,比不上layui数据表格样式的完善,所以我其实有点遗憾,如果有哪位大神,能让table的表头固定在最上面一行,并且能让 删除功能的 td一直停靠在table的最右边 说白了就是类似 layui...
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...
因为之前有一份资源有朋友咨询过X,Y轴交互及区间范围中进行取值的一个问题,所以补一份区间范围的交互及json格式获取数据的demo,如需实现自己所需效果可以自行修改,有疑问也可以留言,json输出如:[{min:0,max:10,...
总的来说,实现动态添加和删除表格行的基本步骤如下: 1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的...
本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,让我们了解基本概念。jQuery的核心特性包括选择器(用于查找HTML元素)、DOM操作(添加、删除或修改...
本资源“jQuery表格增加删除行响应式代码.zip”提供了实现动态表格功能的示例代码,尤其适用于响应式设计,使表格在不同设备上都能保持良好的用户体验。 响应式设计是现代网页开发的关键特性,它确保网站在桌面、...
本主题聚焦于一个特定的应用场景:使用jQuery和Bootstrap创建具有内容修改、删除和编辑功能的表格插件。 首先,jQuery是一个轻量级的JavaScript库,它使得JavaScript编程更加简单、高效。jQuery的核心特性包括DOM...
在这个"jQuery表格添加行数据代码"中,我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件,如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先,`...