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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现计算器功能
Oct 19 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python中的ceil()方法使用教程
2015/05/14 Python
Python中特殊函数集锦
2015/07/27 Python
Python读大数据txt
2016/03/28 Python
python如何制作缩略图
2019/04/30 Python
python实现飞机大战小游戏
2019/11/08 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
投标担保书范文
2014/04/02 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
离婚协议书范文2014
2014/10/16 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python