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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 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
SSI指令
2006/11/25 PHP
基于initPHP的框架介绍
2013/04/18 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
强制设为首页代码
2006/06/19 Javascript
初探jquery——表单应用范例
2007/02/20 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python进行文件对比的方法
2018/12/24 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
如何提高python 中for循环的效率
2020/04/15 Python
python 监控logcat关键字功能
2020/09/04 Python
python3中for循环踩过的坑记录
2020/12/14 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
中学生班主任评语
2014/01/30 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
校运动会广播稿300字
2014/10/07 职场文书
活动总结模板大全
2015/05/11 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Python基于百度API识别并提取图片中文字
2021/06/27 Python