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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
如何在vue 中引入使用jquery
Nov 10 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python实现大转盘抽奖效果
2019/01/22 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
学历公证委托书
2014/04/09 职场文书
十佳少年事迹材料
2014/12/25 职场文书
英文感谢信格式
2015/01/21 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers