`
wujiekangyun
  • 浏览: 47794 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

jquery实现表格行的删除和修改

阅读更多
使用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>&nbsp;&nbsp			<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实现表格的增加、修改、删除、保存代码

    本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能,这些功能是许多Web应用程序的核心部分,特别是在数据管理界面中。 ### 增加 在jQuery中,增加表格行通常是通过动态创建`&lt;tr&gt;`元素并将其...

    jQuery实现表格动态修改和隐藏 实例

    本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能,这对于创建交互式用户界面至关重要。 首先,让我们理解jQuery的核心概念。jQuery通过封装JavaScript API,使得选择元素、操作元素、添加事件监听器...

    jQuery表格内容修改删除代码.zip

    综上所述,"jQuery表格内容修改删除代码"是一个实用的前端开发工具,它利用jQuery的灵活性和Bootstrap的美观性,实现了表格的动态编辑和删除功能,为网页的数据展示带来了更多的可能性。开发者可以根据自己的需求...

    jQuery表格编辑添加删除行插件.zip

    本文将深入探讨“jQuery表格编辑添加删除行插件”,帮助开发者更好地理解和应用这个工具。 首先,我们要理解jQuery的核心价值在于它简化了DOM操作,使得JavaScript代码更加简洁和高效。在这款插件中,我们可以通过...

    jquery合并表格行记录

    本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...

    JQuery实现动态表格点击按钮表格增加一行

    在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...

    jquery插件,基于jquery的表格控件无刷新实现添加编辑删除统计功能

    本文将深入探讨一个基于jQuery的表格控件,该控件实现了无刷新的添加、编辑、删除和统计功能,以VS2008为开发环境,利用Ajax技术,结合JSON数据格式,为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...

    jQuery表格编辑添加删除行代码.zip

    "jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案,它利用JavaScript库jQuery的强大功能,实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先,...

    使用jQuery实现动态添加、删除表格

    本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行,这在数据展示和用户交互中非常常见,特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前,我们需要确保网页已经引入了jQuery库。...

    jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof

    在这个名为"jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof"的压缩包中,重点是实现一个功能丰富的可编辑表格插件。这个插件允许用户直接在表格中进行内容修改和行的删除增加操作,...

    jquery 操作表格

    虽然提供的文件没有直接提及插件,但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点,我们可以构建一个交互式的表格,不仅可以展示静态数据,还能响应用户操作,进行数据的动态更新和...

    使用JQuery实现的动态编辑表格

    基本功能都已实现,本人能力有限,比不上layui数据表格样式的完善,所以我其实有点遗憾,如果有哪位大神,能让table的表头固定在最上面一行,并且能让 删除功能的 td一直停靠在table的最右边 说白了就是类似 layui...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    jquery实现表格行与列的动态增加和删除,X,Y轴及区间值交互

    因为之前有一份资源有朋友咨询过X,Y轴交互及区间范围中进行取值的一个问题,所以补一份区间范围的交互及json格式获取数据的demo,如需实现自己所需效果可以自行修改,有疑问也可以留言,json输出如:[{min:0,max:10,...

    利用jquery给指定的table动态添加一行、删除一行的方法

    总的来说,实现动态添加和删除表格行的基本步骤如下: 1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的...

    JQuery实现可编辑的表格

    本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,让我们了解基本概念。jQuery的核心特性包括选择器(用于查找HTML元素)、DOM操作(添加、删除或修改...

    jQuery表格增加删除行响应式代码.zip

    本资源“jQuery表格增加删除行响应式代码.zip”提供了实现动态表格功能的示例代码,尤其适用于响应式设计,使表格在不同设备上都能保持良好的用户体验。 响应式设计是现代网页开发的关键特性,它确保网站在桌面、...

    jQuery+Bootstrap表格内容修改删除编辑插件

    本主题聚焦于一个特定的应用场景:使用jQuery和Bootstrap创建具有内容修改、删除和编辑功能的表格插件。 首先,jQuery是一个轻量级的JavaScript库,它使得JavaScript编程更加简单、高效。jQuery的核心特性包括DOM...

    jQuery表格添加行数据代码.zip

    在这个"jQuery表格添加行数据代码"中,我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件,如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先,`...

Global site tag (gtag.js) - Google Analytics