jQuery實(shí)現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法

更新時(shí)間：2017年04月17日 08:57:03 作者：捂汗縣長

這篇文章主要介紹了jQuery實(shí)現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法,涉及jQuery頁面元素遍歷與事件動態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法。分享給大家供大家參考，具體如下：

<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(){
/////////////////以下動態(tài)生成10行2列的表格
for(i=1;i<=10;i++)
{
$("#mytable").append("<tr><td>&nbsp;</td><td>&nbsp;</td></tr>"); 
}
/////////////表格生成結(jié)束
/////////////為生成的行添加單擊變色動作
$("#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é)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

xmlplus組件設(shè)計(jì)系列之分隔框（DividedBox)（8）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus布局類組件之分隔框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript省市級聯(lián)下拉菜單實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript省市級聯(lián)下拉菜單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
js實(shí)現(xiàn)數(shù)字跳動到指定數(shù)字
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)字跳動到指定數(shù)字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
微信小程序輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解
這篇文章主要介紹了微信小程序輪播圖實(shí)現(xiàn)原理及優(yōu)化詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
js文件Cookie存取值示例代碼
這篇文章主要介紹了js文件Cookie存取值的使用,需要的朋友可以參考下
2014-02-02
JS路由跳轉(zhuǎn)的簡單實(shí)現(xiàn)代碼
本文給大家分享一個簡單的js路由跳轉(zhuǎn)功能，非常不錯，需要的朋友參考下吧
2017-09-09
JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時(shí)運(yùn)行的任務(wù)最多有N個,感興趣的小伙伴可以了解下
2024-03-03
微信瀏覽器下拉黑邊解決方案 wScroollFix
這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01
JavaScript中校驗(yàn)銀行卡號的實(shí)現(xiàn)代碼
本文通過案例給大家介紹了js中校驗(yàn)銀行卡號的代碼，代碼小編測試過，可行。代碼簡單易懂，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-12-12
全面了解JavaScript的作用域鏈
這是一個非常重要的知識點(diǎn)了，了解了JavaScript的作用域鏈的話，能幫助我們理解很多‘異?！瘑栴}。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04