日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Jquery+Css+Html實現返選、批量刪除、高亮顯示功能

作者：灰太狼yyds 更新時間： 2022-01-16 編程語言

Jquery+Css+Html實現返選、批量刪除、高亮顯示功能


前言

返選應用場景：頁面需選中多條記錄提交后臺(最最貼合身邊實際的使用就是我們掃健康寶需要勾選 是、否 去過中高等風險地區，但如果都沒去也不能一個一個去點否，這時會有一個功能就是“全部為否”的按鈕，就是使用以上的基礎代碼實現的)。
批量刪除應用場景：微信的聊天記錄可以勾選多條然后提交記錄并刪除。
高亮顯示應用場景：非常多，網頁、手機App、小程序等場景都會用到。

提示：以下是本篇文章正文內容，下面案例可供參考

一、什么是Jquery？

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。(百度百科)。

二、什么是Css？

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。 (百度百科)。

三、什么是Html？

HTML的全稱為超文本標記語言，是一種標記語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。 。(百度百科)。

四、Jquery前端代碼實現

先要導入jquery.js文件，使頁面具有jquery的功能。(需要文件可流私信下班看到會回)
在這里插入圖片描述

1.創建一個文本然后打開

創建.txt文本，然后寫上代碼保存，然后將文本后綴改為.html保存，使用瀏覽器打開即可

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 反選，批刪刪除,高量顯示</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="jquery.js"></script>
  <script>
        function fx(){
              $("input[name='booknos']").each(function(){
			          this.checked=!this.checked;		   
			  });
		}
		function plsc(){
               var gs= $("[name='booknos']:checked").length;
			   if(gs==0){
                       alert("刪除信息不能為空");
			   }else
			   {
                    var flag=confirm("確定刪除這"+gs+"條信息嗎");
					if(flag==true){
                          alert("可以提交表單");
					}

			   }

		}
        //行級上色
		function shangSe(oTr){
               $(oTr).css("backgroundColor","#6600FF");
		}
       //行級下色
		function xiaSe(oTr){
              $(oTr).css({backgroundColor:""});
		}
  </script>
 </HEAD>

 <BODY>
 
 <form>
  <TABLE border='0px' width='700px' align='center'>
	 <TR>
		<TD align='right'>
			<input type='button' value='批量刪除' onclick='plsc()'/>
		</TD>
	 </tr>
  </table>
  <TABLE border='1px' width='700px' align='center'>
  <TR>
	<TD><a href='void(0)' onclick='fx();return false;' >反選</a></TD>
	<TD>書號</TD>
	<TD>書名</TD>
	<TD>價格</TD>
  </TR>
  <TR onmouseover='shangSe(this)'  onmouseout='xiaSe(this)'>
	<TD><input type='checkbox' name='booknos' value='001'/></TD>
	<TD>001</TD>
	<TD>人生斷舍離</TD>
	<TD>79</TD>
  </TR>
  <TR onmouseover='shangSe(this)'  onmouseout='xiaSe(this)'>
	<TD><input type='checkbox' name='booknos' value='002'/></TD>
	<TD>002</TD>
	<TD>生活給你的，一定是你能承受的</TD>
	<TD>56</TD>
  </TR>
  <TR onmouseover='shangSe(this)'  onmouseout='xiaSe(this)'>
	<TD><input type='checkbox' name='booknos' value='003'/></TD>
	<TD>003</TD>
	<TD>愿你的生活既有善良，又有鋒芒</TD>
	<TD>45</TD>
  </TR>
  <TR onmouseover='shangSe(this)'  onmouseout='xiaSe(this)'>
	<TD><input type='checkbox' name='booknos' value='004'/></TD>
	<TD>004</TD>
	<TD>數據結構與算法分析</TD>
	<TD>69</TD>
  </TR>
  </TABLE>
  </form>
 </BODY>
</HTML>

1、 標簽 <script></script>體里面要寫js的代碼,邏輯處理的代碼。
2、 標簽 <style></style>體里面要寫css的代碼，頁面展示的樣式。
3、 標簽 <BODY></BODY>體里面主要是展示頁面的內容。
4、 標簽 <HEAD></HEAD>體里面主要是標題頭格式區。
5、 標簽 <HTML></HTML>體是整個頁面的區域。
6、 標簽 <script src="jquery.js"></script>是引入jquery.js文件src等于本地路徑就行。

2.效果實現

1、高亮顯示，就是鼠標所在的行上色：
在這里插入圖片描述
在這里插入圖片描述
2、返選功能實現效果圖：
在這里插入圖片描述
在這里插入圖片描述
3、批量刪除實現效果圖，選中1、2條點擊批量刪除按鈕，出現提示框，點擊確定按鈕進行批量刪除
在這里插入圖片描述
這個可以提交表單表示數據已提交后臺，就是你可以在后端邏輯當中獲取到表單參數，對數據庫進行批量刪除。
在這里插入圖片描述

總結

前端技術要從基礎學起，是沒有難度的，因為現在市場上每家公司都會研發自己的產品，雖然封裝的自己都不認識了，但是底層的方法和源碼的實現基礎都是來自前端知識點的基礎，舉個例子：jquery是一臺發動機沒有名字沒有商標，公司A封裝(寶馬)、公司B封裝(奧迪)、公司C封裝(奔馳)，把這臺發送機按在公司A上那就是A公司自己的產品寶馬，把這臺發送機按在公司B上那就是B公司自己的產品奧迪，把這臺發送機按在公司C上那就是C公司自己的產品奔馳。還都有自己的知識產權、專利等合法手續。

原文鏈接：https://blog.csdn.net/zhx__/article/details/122290215

欄目分類
最近更新