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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详解jquery选择器的原理
Aug 01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 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/08/06 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
性能服装:HYLETE
2018/08/14 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
希特勒的演讲稿
2014/05/23 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
值班管理制度范本
2015/08/06 职场文书
全民创业工作总结
2015/08/13 职场文书
超市店长竞聘书
2015/09/15 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
python爬取某网站原图作为壁纸
2021/06/02 Python