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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery异步提交表单实例
May 30 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
linux查找当前python解释器的位置方法
2019/02/20 Python
wxPython实现列表增删改查功能
2019/11/19 Python
详解python tkinter模块安装过程
2020/01/06 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python 模拟登录B站的示例代码
2020/12/15 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
《藏戏》教学反思
2014/02/11 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
员工手册董事长致辞
2015/07/29 职场文书
新学期主题班会
2015/08/17 职场文书
给学校的建议书400字
2015/09/14 职场文书
《打电话》教学反思
2016/02/22 职场文书
导游词之吉林花园山
2019/10/17 职场文书
python如何读取.mtx文件
2021/04/22 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript