JQuery合并table单元格--有限制(table格式需要注意)
JS代码:
<scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript"></script>
<linkhref="../css/common.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function_w_table_rowspan(_w_table_id,_w_table_colnum) {
_w_table_firsttd="";
_w_table_currenttd="";
_w_table_SpanNum=0;
_w_table_Obj=$(_w_table_id+" tr td:nth-child("+_w_table_colnum+")");
_w_table_Obj.each(function (i) {
if (i==0) {
_w_table_firsttd=$(this);
_w_table_SpanNum=1;
} else {
_w_table_currenttd=$(this);
if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
} else {
_w_table_firsttd=$(this);
_w_table_SpanNum=1;
}
}
});
}
//函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
// 如果为数字,则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function_w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum) {
if (_w_table_maxcolnum==void0) { _w_table_maxcolnum=0; }
_w_table_firsttd="";
_w_table_currenttd="";
_w_table_SpanNum=0;
$(_w_table_id+" tr:nth-child("+_w_table_rownum+")").each(function (i) {
_w_table_Obj=$(this).children();
_w_table_Obj.each(function (i) {
if (i==0) {
_w_table_firsttd=$(this);
_w_table_SpanNum=1;
} elseif ((_w_table_maxcolnum>0) && (i>_w_table_maxcolnum)) {
return"";
} else {
_w_table_currenttd=$(this);
if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("colSpan",_w_table_SpanNum);
} else {
_w_table_firsttd=$(this);
_w_table_SpanNum=1;
}
}
});
});
}
</script>
<scripttype="text/javascript"><!--
$(document).ready(function () {
alert("ok");
_w_table_rowspan("#tab",1);
_w_table_rowspan("#tab",2);
_w_table_rowspan("#tab",3);
// _w_table_rowspan("#spdata", 3);
// _w_table_rowspan("#spdata", 2);
// _w_table_rowspan("#spdata", 1);
});
// -->
</script>
HTML表格格式:
<tableid="tab" border="1">
<trclass="left_title_header">
<tdclass="style2">
I级分类</td>
<tdclass="style2">
II级分类</td>
<tdclass="style2">
可用试题数量</td>
</tr>
<trclass="left_title_2"align="center">
<tdalign="center">
基础类</td>
<tdalign="center">
语言类</td>
<tdalign="center">
3</td>
</tr>
<trclass="left_title_2"align="center">
<tdalign="center">
基础类</td>
<tdalign="center">
管理类</td>
<tdalign="center">
3</td>
</tr><trclass="left_title_2"align="center">
<tdalign="center"class="style2">
基础类</td>
<tdalign="center"class="style2">
动作类</td>
<tdalign="center"class="style2">
4</td>
</tr><trclass="left_title_2"align="center">
<tdalign="center">
基础类</td>
<tdalign="center">
视觉类</td>
<tdalign="center">
4</td>
</tr><trclass="left_title_2"align="center">
<tdalign="center">
技术类</td>
<tdalign="center">
软件开发类</td>
<tdalign="center">
5</td>
</tr><trclass="left_title_2"align="center">
<tdalign="center">
技术类</td>
<tdalign="center">
生物制药类</td>
<tdalign="center">
5</td>
</tr><trclass="left_title_2"align="center">
<tdalign="center">
技术类</td>
<tdalign="center">
医学类</td>
<tdalign="center">
5</td>
</tr>
</table>
效果:
转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/09/05/2672356.html
JQuery合并table单元格--有限制(table格式需要注意)相关推荐
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...
- 设置Table单元格颜色(Table篇三)
组件:Y_XIAO_03 视图:V_MAIN 窗口:W_MAIN Application:Y_XIAO_03 创建组件. 创建节点. 参考类型(重要字段:CELL_COLOR TYPE WDUI_TA ...
- js 拼接html 表格,js合并table单元格(拼table的时候并不知道具体几行几列)
Sys.Application.add_load(function () { var tab = document.getElementById("ctl00_ContentPlaceHol ...
- Element Table 单元格中嵌套表格(Table) 合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
- Vue.js 根据数据,进行Table单元格合并
Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40 3493 收藏 2 展开 表格代码 <table cellspacing=&q ...
- element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
- html5 单元格宽度,html table呈现个人简历以及单元格宽度失效的问题解决
正确的实现代码如下: 个人简历 个人简历 个人资料姓名婚姻照片出 生政治面貌性 别民 族学 位移动电话专 业电子邮件地址:教育背景2012.9 - 2014.9中国海洋大学本科特长及兴趣爱好篮球.足球 ...
- php td内容换行,table单元格内容过多换行显示
节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...
- css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明 该属性是一个简写属性,涵盖了所有其他列表样式属性. ...
- IVIEW组件中Table单元格可编辑、加入各种图表
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...
最新文章
- Centos7 修改运行级别
- SQL Plus的主要功能
- Excel 货币中文大写汉字转化
- 那些不用上班的老人每天是不是很幸福?
- JDBC 获取 Oracle 数据库连接(使用 Driver)
- JY游戏开发,案例之 《下到一百层》,欢迎大家品赏。
- Spring MVC--@RequestMapping
- java变量练习_Java变量与运算符练习
- c语言课程建设与改革,C语言程序设计课程教学改革的研究与实践
- Html5 Canvas动画基础碰撞检测的实现
- SeetaFace6人脸识别源码编译和示例运行
- 隆重推荐:吴闲云 - 三国中的博弈
- 某程序员入职后,发现领导是前公司的下属
- python12306学生票抢票脚本下载_Python 12306抢火车票脚本 Python京东抢手机脚本
- 植物大战僵尸修改存档总结
- 服务器日志文件已被清除恢复,Linux服务器入侵后日志文件删除/恢复方法
- perl生成图片_使用Perl生成模拟数据
- Spring Boot 接入钉钉扫码登录
- el-form 清除表单验证结果
- 分享一下自己的用的几个网站 嘿嘿嘿
热门文章
- python 点云配准,python点云滤波 点云配准用python怎
- git 编辑提交的技巧
- 第三个维度:z-index
- html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号
- img之间出现缝隙的原因_神马情况?美缝剂施工出现脱胶是什么原因?
- openresty模板html页面,单页面部署去Html缓存 nginx/openresty
- android 横盘方向传感器,横盘震荡选择方向!
- 高速软件加密锁技术的发展历程
- VB 实现UTF-8 与GB2312互转
- 交换机 路由器和集线器的区别