jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法。分享給大家供大家參考,具體如下:
<html> <head> <meta charset="utf-8"> <title>jquery表格單擊變色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ /////////////////以下動(dòng)態(tài)生成10行2列的表格 for(i=1;i<=10;i++) { $("#mytable").append("<tr><td> </td><td> </td></tr>"); } /////////////表格生成結(jié)束 /////////////為生成的行添加單擊變色動(dòng)作 $("#mytable tr").click(function(){ if($(this).hasClass("redcss")) { $(this).siblings("tr").removeClass("redcss"); } else { $(this).addClass("redcss"); $(this).siblings("tr").removeClass("redcss"); } }) }) </script> <style> .redcss{ background-color:#900; } </style> </head> <body> <table width="200" border="1" id="mytable"></table> </table> </body> </html>
運(yùn)行效果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
- jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- jQuery動(dòng)態(tài)生成Bootstrap表格
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jQuery實(shí)現(xiàn)多按鈕單擊變色
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】
- jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測(cè)試可用】
相關(guān)文章
JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-10-10javascript實(shí)現(xiàn)在網(wǎng)頁(yè)任意處點(diǎn)左鍵彈出隱藏菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)在網(wǎng)頁(yè)任意處點(diǎn)左鍵彈出隱藏菜單的方法,設(shè)計(jì)鼠標(biāo)事件及css樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04通過js腳本復(fù)制網(wǎng)頁(yè)上的一個(gè)表格的不錯(cuò)實(shí)現(xiàn)方法
通過js腳本復(fù)制網(wǎng)頁(yè)上的一個(gè)表格的不錯(cuò)實(shí)現(xiàn)方法...2006-12-12微信小程序通過點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過直接寫 data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12快速解決js中window.location.href不工作的問題
下面小編就為大家?guī)?lái)一篇快速解決js中window.location.href不工作的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-11-11微信小程序怎么加入JavaScript腳本,做出動(dòng)態(tài)效果
這篇文章主要介紹了教大家為小程序加入?JavaScript?腳本,做出動(dòng)態(tài)效果,以及如何跟用戶互動(dòng)。學(xué)會(huì)了腳本,就能做出復(fù)雜的頁(yè)面了。需要的朋友可以參考下2022-12-12