使用Jquery的ajax方式實現對錶格的刪除和修改

時間 2021-08-14

標籤 javascript java jquery ajax 瀏覽器 ide 函數 post this url 欄目 JQuery 简体版

原文原文鏈接

使用Jquery的ajax方式實現對錶格的刪除和修改，相似於javaeye上的收藏管理中的類別管理功能。
http://jquery.group.iteye.com/group/topic/6524javascript

Java代碼

$(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();
});
}
});
});

$(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，因此你會看到先是所有顯示了兩行，而後有一行忽然消失的現象。
java

Java代碼

<style>
.view {
display: none;
}
</style>
<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 <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>

<!-- 在每一行都有一個惟一的標示來表示，方便用jquery查找-->
<style>
.view {
 display: none;
}
</style>
<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>

這是效果的預覽圖片

jquery