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 相关文章推荐
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现全选按钮
Jan 01 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
fgetcvs在linux的问题
2012/01/15 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python实发邮件实例详解
2019/11/11 Python
python 如何区分return和yield
2020/09/22 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
名人演讲稿范文
2013/12/28 职场文书
户籍证明书标准模板
2014/09/10 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
国家助学金感谢信
2015/01/21 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL