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.load()和Jsp的include的区别
Apr 12 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现手风琴特效
Jan 11 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php反射应用示例
2014/02/25 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
详解webpack 多入口配置
2017/06/16 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
委托公证书范本
2014/04/03 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
买卖车协议书
2014/04/21 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
余世维讲座观后感
2015/06/11 职场文书
老兵退伍感言
2015/08/03 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
Python实现简繁体转换
2021/06/07 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL