Jquery之table中根據(jù)行選中，進(jìn)行背景變色和radio選中-創(chuàng)新互聯(lián)

實(shí)現(xiàn)功能：點(diǎn)擊列表中的某一行，然后當(dāng)前行會變成其他顏色，并且其中的radio會被選中。

創(chuàng)新新互聯(lián)，憑借十載的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有上千多家案例。做網(wǎng)站建設(shè)，選成都創(chuàng)新互聯(lián)。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("tbody>tr").click(function(){
		$(this)
		    .addClass('sel')
		    .siblings().removeClass('sel');
		    .end()
		    .find(':radio').attr('checked',true);
	});
})
</script>
<style type="text/css">
.sel{
  background: red;
}
</style>
</head>
<body>
 
  <table>
    <thead>
	     <tr><th>選擇</th></tr>
	     <tr><th>姓名</th></tr>
    <thead>
    <tbody>
       <tr><td><input type="radio" name="fruit"></td><td>張三</td></tr>
       <tr><td><input type="radio" name="fruit"></td><td>李四</td></tr>
       <tr><td><input type="radio" name="fruit"></td><td>王五</td></tr>
    </tbody>
  </table>
</body>
</html>

學(xué)習(xí)之初對于end的用法不太了解，我把自己理解說下，歡迎指教。

END()用法在官方文檔的說明回到最近的一個"破壞性"操作之前。即將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。相信不少人并沒有理解它的用法。

舉個簡單例子

<p><span>Hello</span>,how are you?</p>

jQuery 代碼：

$("p").find("span").end()

其返回的值為：

[ <p><span>Hello</span> how are you?</p> ]

其實(shí)就是：查找P標(biāo)簽中的<span>標(biāo)簽，接著使用END()方法結(jié)束對P標(biāo)簽的引用，此時返回的是P標(biāo)簽(JQuery)對象

就如第一個例子如果我采用end()用法，那么寫法就是

<script type="text/javascript">
$(document).ready(function(){
	$("tbody>tr").click(function(){
		$(this)
		    .addClass('sel')
		    .siblings().removeClass('sel');
		$(this).find(':radio').attr('checked',true);
	});
})
</script>

如果初始化的時候有表格被選中，則需要處理，代碼如下：

$("table :radio:checked").parent().parent().addClass('sel');

或者

$("table :radio:checked").parents("tr").addClass('sel');

或者

$('tbody>tr:has(:checked)').addClass('sel');

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：Jquery之table中根據(jù)行選中，進(jìn)行背景變色和radio選中-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://www.chinadenli.net/article12/idcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、ChatGPT、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Jquery之table中根據(jù)行選中，進(jìn)行背景變色和radio選中-創(chuàng)新互聯(lián)