jQuery插件表格实例

最新推荐文章于 2022-01-11 22:00:55 发布
最新推荐文章于 2022-01-11 22:00:55 发布
阅读量101 收藏
点赞数
分类专栏： jQuery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zdl10141122/article/details/84692557
版权

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

table{ border:0;border-collapse:collapse;}

td{ font:normal 12px/17px Arial;padding:2px;width:100px;}

th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1pxsolid #333;}

.tth{color:red;}/* 标题样式*/

.even{ background:#FFF38F;}  /* 偶数行样式*/

.odd{ background:#FFFFEE;}  /* 奇数行样式*/

.selected{ background:#FF6500;color:#fff;}

</style>

<script src="../jquery/jquery-2.1.1.js" type="text/javascript"></script>

<script type="text/javascript">

 

(function($) {

$.fn.extend({

"alterBgColor":function(options){

 

options=$.extend({

tth:"tth",/*标题样式*/

odd:"odd",/* 偶数行样式*/

even:"even", /* 奇数行样式*/

selected:"selected" /* 选中行样式*/ 

},options);

 

$("th",this).addClass(options.tth);

$("tbody>tr:odd",this).addClass(options.odd);

$("tbody>tr:even",this).addClass(options.even);

$('tbody>tr',this).click(function(){

 

var hasSelected=$(this).hasClass(options.selected);

$(this)[hasSelected?"removeClass":"addClass"](options.selected)

.find(':checkbox').attr('checked',!hasSelected);

});

// 如果单选框默认情况下是选择的，则高色.

$('tbody>tr:has(:checked)',this).addClass(options.selected);

return this;  

}

});

})(jQuery);

 

//插件应用

$(function(){

$("#table2").alterBgColor();  

})

 

</script>

</head>

<body>

<table id="table1">

<thead><tr><th> </th> <th> 姓名</th> <th> 性别</th> <th> 地址</th></tr></thead>

<tbody>

<tr>

<td><input type="checkbox" name="choice" value=""/></td>

<td>张山</td>

<td>男</td>

<td>上海徐汇</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>李四</td>

<td>女</td>

<td>上海虹桥</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" checked="checked" /></td>

<td>王五</td>

<td>男</td>

<td>上海长宁</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>赵六</td>

<td>男</td>

<td>上海宝山</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>孙七</td>

<td>男</td>

<td>上海黄浦</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" checked="checked" /></td>

<td>周八</td>

<td>女</td>

<td>上海松江</td>

</tr>

</tbody>

</table>

 

 

<br /><br />

 

 

<table id="table2">

<thead><tr><th> </th> <th> 姓名</th> <th> 性别</th> <th> 地址</th></tr></thead>

<tbody>

<tr>

<td><input type="checkbox" name="choice" value=""/></td>

<td>张山</td>

<td>男</td>

<td>上海徐汇</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>李四</td>

<td>女</td>

<td>上海虹桥</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" checked="checked" /></td>

<td>王五</td>

<td>男</td>

<td>上海长宁</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>赵六</td>

<td>男</td>

<td>上海宝山</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" /></td>

<td>孙七</td>

<td>男</td>

<td>上海黄浦</td>

</tr>

<tr>

<td><input type="checkbox" name="choice" value="" checked="checked" /></td>

<td>周八</td>

<td>女</td>

<td>上海松江</td>

</tr>

</tbody>

</table>

</body>

</html>

坏小子ZDL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery表格插件flexgrid最新版及实例
12-23
好好的flexgrid组件就这样断更，给大家留着希望能够帮助你，此外还加了些例子，希望都用其拉
案例：jQuery动态创建表格（完整代码）
m0_65085680的博客
10-11 1463
案例：jQuery动态创建表格（完整代码）
jquery 操作表格实例
u011927449的博客
05-04 167
案例1：隔行变色，滑动，点击变色以（选中取消效果）（addClass(),removeClass(),toggleClass()） Html： <h4>1.隔行变行</h4> <table width=500 class="tab01"> <tr> <th>name</th> ...
FooTable高级的响应式表格jQuery插件
qq_35928732的博客
06-14 9210
FooTable高级的响应式表格jQuery插件文章转载自：问说网 » FooTable高级的响应式表格jQuery插件文章地址：http://www.uedsc.com/footable.htmlFooTable是一个高级jQuery插件，允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格。它可以将HTML表转换成可扩展的响应式表格，且通过单击某一行即可将该行数据隐藏起...
学习使用JQuery来制作一个动态表格
quasiceo
11-22 727
今日开始学习使用JQuery,尝试利用JQuery来制作一个动态表格,结构如下 后面两个Class为空来应对可能增加的列数来调节列宽 $("div>p").parent().not($(".grid_2")).filter("nth-child("+lenth+"n+1)")来选择每行的第2列,但是却选中了第三列,百思不得其解 利用firbug查询该元素无意发现元素下的nodeinde
Jquery02(动态创建表格案例、回到顶部案例、城市选择案例【权限管理】、省市选择【联动】、QQ微博)...
weixin_30278311的博客
03-31 242
动态创建表格案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-jQuery-动态创建表格案例</title> <script src="jquery-1.11.3.js">...
jquery表格导出插件表格为Excel和pdf文档的详细实例源码.rar
01-27
jquery表格导出插件 jquerytableExport实现导出 jqueryeasyui和bootstrap的表格为Excel和pdf文档 详细实例源码
jQuery表格数据分页插件代码.zip
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
动态实时生成产品分类电子表格jQuery插件
09-10
动态实时生成产品分类电子表格jQuery插件下载。一款仿淘宝动态生成SKU表格实例js特效插件。可自定义添加商品SKU属性。价格和库存点击输入。
jquery grid表格插件
10-17
里面含有具体的实例。是一个jquery对表格列操纵的插件内容
第十节课-用jquery实现表格案例
何厚勋
01-09 214
jquery的几种写法 $(function(){ $( '#google' ).click(function(){ alert( $(this).text() ); return false; }); }); (function($) { alert('hello'); $(
JQuery动态创建表格
xcx010321的博客
12-28 1692
<style> table {border: 1px solid #ccc; border-collapse: collapse; } th,td { border: 1px solid #ccc; color: #000; padding: 10px } th { background-color: ...
FooTable
cnbird's blog
04-07 4817
http://themergency.com/footable/ http://www.datatables.net/ http://www.bootcss.com/p/metro-ui-css/tables.html
使用jQuery实现修改表格，详细讲解如何实现(完成增删改和复制的操作)
yuhaowen的博客
01-11 3996
使用jQuery实现修改表格，详细讲解如何实现(完成增删改和复制的操作)
jQuery 表格响应式插件 FooTable
weixin_33674976的博客
01-05 346
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery 表格实现
wyy的博客
04-26 811
<script type="text/javascript"> $(function(){ /******实现全选的操作****/ $("#chks").click(function(){ //获得当前框的勾选状态 var flag= $("#chks").prop("checked");
jQuery实现可以编辑的表格实例详解
PresByter的博客
10-13 2155
效果图 - 点击单个可以进行修改 - 点击修改所有的表格都可以进行修改 - 点击保存所有的数据可以获取并打印出来 - 本人demo需要引入jq文件代码见如下（有详细的注解）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编辑</title> </head> <script src="j
jquery操作表格
wyqwilliam的博客
12-15 411
<html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> tr{ height: 40px; } </style&g...
【JQuery】可以编辑的表格实例
习惯成自然
01-09 1230
JQuery实践
jquery类似excel表格插件
最新发布
10-29
虽然jQuery本身没有提供类似Excel表格的插件，但是可以利用jQuery的功能和一些其他插件来实现类似Excel表格的功能。 首先，可以使用jQuery的选择器和DOM操作方法来创建和修改表格的HTML结构。通过选择器可以找到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值