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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现影院选座订座效果
Apr 13 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
使用TensorFlow实现SVM
2018/09/06 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
优秀大专毕业生求职信
2014/08/04 职场文书
简易版租房协议书范本
2014/10/13 职场文书
社区灵活就业证明
2014/11/03 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript