jQuery实现动态生成表格并为行绑定单击变色动作的方法


Posted in jQuery onApril 17, 2017

本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法。分享给大家供大家参考,具体如下:

<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(){
/////////////////以下动态生成10行2列的表格
for(i=1;i<=10;i++)
{
$("#mytable").append("<tr><td> </td><td> </td></tr>"); 
}
/////////////表格生成结束
/////////////为生成的行添加单击变色动作
$("#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>

运行效果如下:

jQuery实现动态生成表格并为行绑定单击变色动作的方法

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
You might like
php 面向对象的一个例子
2011/04/12 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
自学python用什么系统好
2020/06/23 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
实习护士自我鉴定
2013/10/13 职场文书
师范毕业生自荐信
2013/10/17 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
三八节主持词
2014/03/17 职场文书
《老山界》教学反思
2014/04/08 职场文书
委托书格式
2014/08/01 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
python学习之panda数据分析核心支持库
2021/05/07 Python