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上传图片显示预览功能
Jun 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
教师研修随笔感言
2015/11/18 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python