JQuery程式設計demo練習

阿新 • • 發佈：2019-02-03

JQuery練習demo：
編寫程式，實現：
1、選中其中一列的複選框時，該複選框所在行的背景色高亮顯示（黃色）。

2、取消選中複選框時，所在行的背景色恢復。

===================================答案=================================

html程式碼：

<title>無標題文件</title>
<script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script>
</head>
<style>
.classw{
	background-color:#CFF;
}
.classg{
	background-color:#FFC;	
}
.classy{
	background-color:#FF0;
}
</style>
<body>
<h3 align="center">員工資訊</h3>
<table border="1px" cellspacing="0" width="50%" align="center">
	<tr>
     	<th></th>     
    	<th>姓名</th>
        <th>薪水</th>
        <th>年齡</th>      
    </tr>
    <tr class="classw">
    	<td>
        	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
        </td>
        <td>
        	張三
        </td>
        <td>
        	20000
        </td>
        <td>
        	23
        </td>
    </tr>
    <tr class="classg">
    	<td>
        	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
        </td>
        <td>
        	李四
        </td>
        <td>
        	22000
        </td>
        <td>
        	22
        </td>
    </tr>
    <tr class="classw">
    	<td>
        	<input type="checkbox" value="1" name="check" onclick="myselect()" />
        </td>
        <td>
        	王五
        </td>
        <td>
        	14000
        </td>
        <td>
        	26
        </td>
    </tr>
    <tr class="classg">
    	<td>
        	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
        </td>
        <td>
        	馬六
        </td>
        <td>
        	15000
        </td>
        <td>
        	21
        </td>
    </tr>
</table>
</body>
<script>
	$("th").css("background-color","#CCC");

	
function myselect(){
	$("table :checkbox:checked").parent().parent().addClass("classy");
	$("table :checkbox").not("input:checked").parent().parent().removeClass("classy");
	
	
}

</script>
</html>

效果圖如下：

JQuery程式設計demo練習

JQuery練習demo：編寫程式，實現： 1、選中其中一列的複選框時，該複選框所在行的背景色高亮顯示（黃色）。 2、取消選中複選框時，所在行的背景色恢復。 ===================================答案=======

jQuery 選擇器demo練習

大於 width ide query rip one 不包含隱藏 more <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <ti

jquery完成一個日曆demo練習總結

jquery草草基本看完，今天在前端網看到一個jquery完成的日曆demo就模仿著寫了一下，當然問題還是很多．演算法描述 - 建立當前月份，年份函式並且返回直． - 建立日曆函式，並且給出年份，月份兩個變數． - 獲取所要顯示月份，年份

accp8.0轉換教材第10章Ajax和jQuery理解與練習

put else win send jquery實現 servlet ews window 8.0 C/S （Client/Server）結構，即大家熟知的客戶機和服務器結構。 B/S（Browser/Server）結構即瀏覽器和服務器結構。認識ajax 、XMLHttp

jQuery基礎--案例練習

分享 meta 取消 -h mar utf-8 根據 .com 輸入 1.端口案例改進，操作更靈活 <head> <meta charset="UTF-8"> <title>Title</title>

Linux入門小抄-part5-Shell程式設計基礎--練習

1、列印9*9乘法表示例程式碼： #!/bin/bash for((i=1;i<=9;++i)) do for((j=1;j<=i;j++)) do echo -ne "$i*$j=$((i*j))\t" done echo done

C++程式設計題練習程式碼筆記

從文字檔案old.txt讀取字元，將其中的數字字元‘0’、‘1’、‘2’、‘3’、‘4’、‘5’、‘6’、‘7’、‘8’、‘9’ 分別用英文字母字元‘Z’、‘Y’、‘X’、‘W’、‘V’、‘U’、‘T’、‘S’、‘R’、‘Q’替換，其餘字元不變，結果寫入文字檔案new.txt，並分別將兩個

【jwt學習筆記】--demo練習

第一步、匯入maven座標 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version

Java 由淺入深GUI程式設計實戰練習（一）

專案簡介： 1.實現利用下拉選單的方式選擇傳送快捷語句； 2.實現對留言資訊內容的置頂處理以及至尾處理； 3.實現清屏處理或現實保留部分留言內容；執行介面：程式碼展示： import java.awt.BorderLayout; import java.awt.Button; imp

Java 由淺入深GUI程式設計實戰練習（二）

一，專案簡介 1.利用Java GUI 繪製圖像介面，設定整體佈局 2.編寫一個隨機數生成1~100的隨機數 3.編寫一個驗證類，用於驗證使用者輸入值與生成隨機數是否相等並記錄使用者猜測次數，當用戶猜測成功或者超過5次結束遊戲二，執行介面三，程式碼實現 import java.awt

Java 由淺入深GUI程式設計實戰練習（三）

一，專案介紹 1.可以檢視年，月，日等功能。能獲取今天的日期，並且能夠通過下拉年，月的列表。 2.當程式執行時，顯示的時間是系統當前時間。 3.可以手動輸入時間，確定後系統跳轉到制定的時間。 4.提供一種點選功能，通過點選實現年份，月份的自增和自減功能。二，執行介面三，程式碼詳情

C++ 第一個demo練習，map會排序

定義簡單結構體Plane 獲取控制檯輸入的內容 new一個Plane存入map。將map裡所有的Plane的name輸出 typedef struct { string name; int id; double longtitude; double latitude; doubl

程式設計題練習(4)

字串匹配演算法法1：暴力匹配法。主串A(長度m），模式串B(長度n)，串B逐位移動與串A比較。如果當前字元匹配成功（即A[i] == B[j]），則i++，j++，繼續匹配下一個字元；如果匹配失敗（即A[i]! = B[j]），令i = i - j + 1，

SDUT- 1140 面向物件程式設計上機練習一（函式過載）

import java.util.Scanner; public class Main { static int Max(int a[]) { int ans = a[0]; for(int i = 0; i < 5; i++)if(a[i] > a

1140-面向物件程式設計上機練習一（函式過載）-JAVA

面向物件程式設計上機練習一（函式過載） Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 利用陣列和函式過載求5個

web前端基礎教學視訊分享（四）jquery視訊教學+練習原始碼

【寫在前面】梅雪爭春未肯降，騷人閣筆費評章。好文待評如君意，執筆書她黛月迷。實在編不下去了，哈哈哈哈【分享與你】有教學視訊和相關視訊的demo，這3塊錢當時買的簡直良心啊連結：https://pan.baidu.com/s/1wHDZ3n1LTn2sL1vGe7RJAA 提取

jQuery程式設計的最佳實踐

原文：https://www.cnblogs.com/Wayou/p/jquery_best_practise.html 好像是feedly訂閱裡看到的文章，讀完後覺得非常不錯，譯之備用，多看受益。載入jQuery 1.堅持使用CDN來載入jQuery，這種別人伺服器免費幫你託管檔案的

C++面向物件程式設計上機練習一

1.函式過載之陣列升序排序試題描述兩個過載函式原型如下： void fun(int arr[], int n); void fun(double arr[], int n); 編寫這兩個函式，將int型或double型別的陣列arr[]各個元素從小到大排序，排序之後的元素仍然存在

jQuery學習筆記——jQuery選擇器練習

<!DOCTYPE html> <html> <head> <meta char

Jquery選擇器練習（二）

Jquery的選擇器非常強大，只要運用熟悉，方可對Dom操作得心應手。一些選擇器和CSS偽類很相似，很容易引起混淆，需要多加練習和注意。 <!DOCTYPE html> <html lang="zh-cn"> <head> <

JQuery程式設計demo練習

相關推薦