1. 程式人生 > >jsp 頁面 forEach--table 下 刪除當前的tr行

jsp 頁面 forEach--table 下 刪除當前的tr行

發現一個程式碼比較少,也比較使用的方法

     <table class="table table-hover text-center">
		      <tr>
		        <th style="text-align:center;">職業</th>
		        <th style="text-align:center;">熱門職業</th>
		        <th style="text-align:center;">操作</th>
		      </tr>
		      
		      <c:forEach items="${map.xxx}"  var="list"> 
		        <tr id="tr_${list.id}" style="border-bottom: 1px solid #DDDDDD;">
		          <td style="display: none;">${list.id}</td>
		          <td>${list.occupation}</td>
		          <td>
		           <c:if test="${list.xxx==1}">不熱門</c:if>
		           <c:if test="${list.xxx==2}">熱門</c:if>
		          </td>
		          <td>
		         	 <div class="button-group">			         
			          <a class="button border-yellow" href="#" onclick="return del(${list.id})"><span class="icon-plus-square-o"></span>刪除</a>
		          	 </div>
		          </td>
		        </tr>
		      </c:forEach>
	   
         </table>


這裡我們可以看到我們利用的我們在後臺得到的 id 進行操作,個人感覺很方便也很實用 用ajax刪除資料庫同時刪除當前行,並且還不影響當前分頁,感覺還是不錯的

//單個刪除
function del(id){
	  if(confirm("您確定要刪除嗎?")){
		 var url = "/backstage/xxx/";
			$.ajax({
				url : url,
				type : "post",
				data : {
					"xx" :xx
				},
				success : function(job) {
					if (job==xxx) {
					    var tr = document.getElementById("tr_"+id);
					    tr.parentNode.removeChild(tr);
					}else {
						alert("刪除失敗,請重試!");
					}
				}
			});
	   }  
}
這種是html的,吧 id= tr_xx 改活就和上面的一樣 感覺挺好用的
<body>
<table border="1">
	<tr><th>ID</th><th>標題</th><th>時間</th><th>操作</th></tr>
	<tr id="tr_1"><td>1</td><td>標題1</td><td>時間1</td><td><a href="javascript:void(0)" onclick="del_tr(1)">刪除</a></td></tr>
	<tr id="tr_2"><td>2</td><td>標題2</td><td>時間2</td><td><a href="javascript:void(0)" onclick="del_tr(2)">刪除</a></td></tr>
	<tr id="tr_3"><td>3</td><td>標題3</td><td>時間3</td><td><a href="javascript:void(0)" onclick="del_tr(3)">刪除</a></td></tr>
	<tr id="tr_4"><td>4</td><td>標題4</td><td>時間4</td><td><a href="javascript:void(0)" onclick="del_tr(4)">刪除</a></td></tr>
</table>
</body>
<script>
function del_tr(id){
	var tr = document.getElementById("tr_"+id);
        tr.parentNode.removeChild(tr);
}
</script>


相關推薦

jsp 頁面 forEach--table 刪除當前tr

發現一個程式碼比較少,也比較使用的方法 <table class="table table-hover text-center"> <tr> <th style="text-align:cente

解決/WEB-INF目錄jsp頁面引入webRoot的Js、css和圖片的問題

type ref 引入 即使 處理 back round tex 定位 轉自:http://blog.csdn.net/qq_18875541/article/details/69390871 通常把jsp頁面放在webRoot的/WEB-INF下可以防止訪問者直接輸入

微信公眾號之微信支付(V3版)jsp頁面jsapi統一單調啟支付(java版)

web專案 按順序一步一步來 準備: 申請了微信支付介面的微信公眾號一枚 , 備案的域名網站一枚, (如果有沒有的這兩個東西會耽誤你很久,因為微信支付必須是線上,無法本地除錯,)  這裡說一下 如果有經濟條件的最好申請一臺win系統的伺服器作為測試伺服器這樣會使你省去很

jsp頁面中的拉列表

在WEB開發過程中,我們經常遇到資訊修改的功能需求。這時我們給使用者提供一個JSP頁面,展示出當前的資訊並允許使用者重新設定新值。而在這個頁面中,一般是少不了下拉列表的。至於它的處理方式,我以前想過一種,思路如下:在頁面設定一個隱藏域,用於儲存後臺傳遞過來的值;然後在頁面輸出下拉列表,這時它的值是預設的

jsp頁面foreach迴圈,表單提交,批量處理資料,

jsp頁面 jsp頁面: <body> <form action="test" method="post"> <c:forEach begin="1" end="4" varStatus="status"> name:<

關於/WEB-INF目錄jsp頁面引入webapp的js、css和圖片的問題

針對javaweb專案,通常將jsp頁面放在WEB-INF目錄下,通過程式內部進行訪問,防止外部使用者通過位址列直接訪問。但是當WEB-INF目錄下的檔案需要使用外部的css、js或者圖片檔案時,使用相對路徑卻沒辦法載入。 此時,需要使用到檔案的絕對路徑,即在訪問的路徑前加

my97datepicker控制元件 JSP頁面開啟預設顯示系統當前時間

今天剛好要增加JSP頁面開啟預設顯示系統當前時間功能,看到這篇文章不錯,給自己記個筆記。也分享一下 後面是原文連結: <script language="javascript" type="text/javascript" src="${ctx}/js/My97DatePicker/WdatePi

jsp中給table增加刪除、修改

<td align="center" >//居中 <a href='delete.jsp '>刪除</a> &nbsp//空格<a href=

jsp頁面可輸入拉框實現

<HTML>  <HEAD>  <META http-equiv='Content-Type' content='text/html; charset=gb2312'&

table中設置tr間距

body 人工 border value markdown css int 忽略 lan CSS border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框 值 描述 separate 默認值。邊框會被分開。不會忽略 border-spaci

jquery複製當前tr

//複製 var vBudgetCompileObj = (function() { /*table新增/移除行,引數:tableId*/ var getMaxIndex; var f

eclipse刪除所有空

1.開啟原始碼編輯器 2.使用快捷鍵Ctrl+f 3.在Find輸入框中輸入:^\s*\n  3.Replace With輸入框的值為空 4.在【Options】選中的"Regular expressions" 5.點選【Replace All】按鈕。 6.OK! 注意

JSP頁面tablec:forEach迴圈tr、td自動換處理

<!-- vs.count % number ==0 想多少列換行,改變number值即可 --> <table> <tr> <c:forEach var="obj" items="${list}" varStatus="vs"

利用jquery.ajax在jsp頁面動態生成table,可以增加修改,並支持一行和多刪除

分享 ica 圖片 PE sibling 多行 點擊 table 技術 聲明:此為本人原創,只想實現功能,界面樣式方面沒多考慮,很粗糙能看懂就行……2018-5-14 動態生成table,我利用jsp內嵌java代碼從後臺獲取對象集合,輸出的時候有2中方法 1.直接利用

jsp頁面年份拉框生成當前年的前n年和後n年

因為要用到Calendar方法,首先要匯入Calendar類所在的包。<%@ page import="java.util.Calendar"%><select name='year'><option></option><

【Web篇03】Spring框架,servlet響應的res在jsp頁面中顯示時,防止亂碼的操作

首先,在Spring軟體中,找到Web工程,src下的對應的servlet; 在servlet中獲取請求引數之後,給瀏覽器傳送響應之前; 需要鍵入一段程式碼即可,如下: response.setContentType("text/html;charset=UTF-8"); 括號內的

織夢table頁面如何迴圈取餘輸出tr

像上圖,3個td 1個tr包起來 模板程式碼 <table> <tr> {dede:list pagesize='9' titlelen='250'} <td><a href="[field:arcurl/]">[field:title/]&l

聯合使用jsp標籤和struts的標籤在jsp頁面獲取當前時間

有時候需要在頁面獲取當前時間,但是又不想從後端傳過來。使用jsp的標籤和struts的時間日期格式標籤可以獲取自己想要的時間格式。 <div> <jsp:useBean id="time" class="java.util.Date" scope="req

刪除當前目錄及子目錄的exe檔案

學習C++的時候, 因為有很多一個一個單檔案cpp編譯生成exe, 這樣時間久了就會有很多多餘的exe檔案, 之所以說多餘是因為以前的程式碼寫了之後就幾乎用不到了. 但還是想保留原始檔, 畢竟是自己一行一行寫下來的. 下面介紹一種bat批處理命令刪除exe檔案. 方法很簡單, 就是一

基於Resteasy框架jsp頁面訪問404錯誤

如圖,這是我的工程目錄結構,我嘗試訪問WebContent目錄下的index.jsp頁面; 後面在老師的幫助下,我學習到Resteasy框架下只會監聽class類等一些,不會去監聽html,jsp等檔案,所以要想讓Resteasy框架訪問到jsp,需修改web.xml裡面的servl