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手风琴的简单制作
May 12 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
对盗链说再见...
2006/10/09 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
utf8的编码算法 转载
2006/12/27 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
python连接oracle数据库实例
2014/10/17 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python2.7安装图文教程
2018/03/13 Python
Python实现验证码识别
2020/06/15 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
企业法人授权委托书
2014/09/25 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang