jQuery_review之table中根據行選中，進行背景變色和radio選中

阿新 • • 發佈：2019-01-16

在各種WEB系統中經常可以看到類似的操作，點選中列表的某一行，然後當前行就會變成其他的顏色，並且其中的radio就會被選中。並且一般還會滑鼠滑過的時候的動態特效，比如滑鼠滑過當前行的時候會有一個變色的樣式。趁著複習jQuery的機會，看一下使用jQuery來實現這個功能的步驟。

在這個功能當中，有一個需要注意的小知識點：如何增加一個radio？在HTML中，增加一個HTML使用如下的程式碼<input type="radio" name="fruit">這樣子，HTML解析引擎會幫幫我們做一件事情，就是會為我們維持這樣一個規則，同一個name的radio框在同一時間只能被選擇一個，這個也是為什麼這個框通常被稱之為單選框的原因了。此外，無論在哪個功能的實現中，最重要的當然就是如何選中當前頁面的元素了。在這個DEMO中，會用到下面幾種選擇的方式。element.hasClass("aClass")這個會返回一個boolean值，這個是用來判斷當前的元素是不是含有aClass樣式。element.removeClass('aClass')是從element上刪除aClass這個型別。element.find(selector)是從當前的element元素中找到符合選擇器的元素，在jQuery凡是能夠將選擇器作為引數傳入的函式，都是功能比較強大的，例如filter(),例如has()等。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("tbody>tr:odd").css("background-color","#FEF2E8");
  		$("tbody>tr:even").css("background-color","white");
  		$("tbody>tr").click(function(){
  			$(this).find(":radio").attr("checked",true)
  			  .end().find("td").addClass("selected")
  			  .end().siblings().find("td").removeClass("selected");
  		});
  	})
  </script>
  <style type="text/css">
  	table{
  		text-align:center;
  		width:400px;
  		height:100px;
  		border:solid #000 1px;
  	}
  	thead tr td{
  		border-bottom:solid #000 1px;
  	}
  	td.selected{
  		background-color:#E49B1A;
  	}
  	td.hover{
  		background-color:#EAFFE6;
  	}
  </style>
  </head>
  <body>
  	<table>
  		<thead>
  			<tr><td></td><td>fruit</td><td>price</td><td>date</td></tr>
  		</thead>
  		<tbody>
  			<tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  		</tbody>
  	</table>
  </body>
</html>

jQuery_review之table中根據行選中，進行背景變色和radio選中

jQuery_review之table中根據行選中，進行背景變色和radio選中

element 中點選table中的某一行，使對應行中的Input獲取焦點

table中的單行省略，並不能讓td能自適應

轉載：monkeyrunner之eclipse中運行monkeyrunner腳本之環境搭建（四）

java打印等腰三角形的兩種方法！（根據行數，根據底邊長度）

js操作table中tr的順序，實現上移下移一行的效果

JS基礎(二)事件監聽練習之table滑鼠懸停行變色

iview之——table中巢狀input、select等

iView頁面Modal中內嵌Tabs，重新顯示Modal時預設選中Tabs的第一項

JS 陣列中有 undefined 值，用 for 迴圈和 for…in 迴圈遍歷的不同之處

SQL中根據行號設定每行資料的排序數值

table中head表頭固定，body滾動

史無前例之---NodeJs 中讀取OracleDB 資料，將data 生成 Excel檔案

mysql中根據“-”拆分字串，並獲取當前小時轉數字

vue + iview頁面Modal中內嵌Tabs，重新顯示Modal時預設選中Tabs的第一項

Linux中多行註釋，多行刪除。

獲取oracle資料庫中表中記錄行數，不使用select count()方式

jq+layui之table表每行的編輯按鈕只能點擊觸發一次的問題的解決（未完待續）

c++ 從文字中逐行讀取，並按空格對讀取的一行進行分割

獲取gridview中選擇行時，前一次選擇的行的資料

jQuery_review之table中根據行選中，進行背景變色和radio選中

相關推薦