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 25 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Atom的python插件和常用插件说明
2018/07/08 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
银行员工职业规划范文
2014/01/21 职场文书
安全承诺书格式
2014/05/21 职场文书
防灾减灾活动总结
2014/08/30 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android