基于JQuery实现相同内容合并单元格的代码
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下:
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始,哪一列有相同的内容就输入对应的列数值
$(“#table1″).rowspan(2);
});
</script>
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
IE效果
火狐效果
更多的前端开发可以关注 UI前端
相关推荐
-
jquery 动态合并单元格的实现方法
如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab
-
jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>
-
jQuery实现HTML表格单元格的合并功能
本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.
-
基于jquery的合并table相同单元格的插件(精简版)
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
-
基于jQuery的合并表格中相同文本的相邻单元格的代码
ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 广州 00027 白花油 广东 广州 00028 红花油 广东 深圳 00028 红花油 广东
-
合并table相同单元格的jquery插件分享(很精简)
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
-
jquery 合并内容相同的单元格(示例代码)
如下所示: 复制代码 代码如下: 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(" + _
-
JQuery实现表格中相同单元格合并示例代码
代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this
-
jquery miniui 教程 表格控件 合并单元格应用
表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3
-
基于JQuery实现相同内容合并单元格的代码
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 复制代码 代码如下: <script type="text/javascript"> jQuery
-
Java利用EasyExcel实现合并单元格
目录 pom版本 1.自定义合并单元格 1.1 不合并单元格 1.2 合并单元格 1.3 写多个sheet 1.4 WriteTable pom版本 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.7</version> </dependency> 1.自定义合并单元格 在某些
-
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle
-
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
-
Python基于xlrd模块处理合并单元格
目的: python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式. 总体思路: (1)要想实现对Excel数据的读取,需要用到第三方应用,直接应用. (2)实际操作时候和我们实际平时打开一个文件进行操作一样,先找到文件-->打开文件-->定义要读取的sheet-->读取出内容. Excel处理合并单元格: 已存在合并单元格如下: xlrd中的 merged_cells 属性介绍:[code]import xlrd import xlrd workbook = xlr
-
antd vue table跨行合并单元格,并且自定义内容实例
ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla
随机推荐
- linux shutdown命令详解
- SQLite教程(五):索引和数据分析/清理
- js关闭子窗体刷新父窗体实现方法
- Java中checkbox实现跨页多选的方法
- 实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
- 教你安装python Django(图文)
- 基于AJAX的分页类实现代码
- jQuery 跨域访问问题解决方法
- Java遍历Map键、值和获取Map大小的方法示例
- Android如何通过手机获取验证码来完成注册功能
- java调用短信猫发短信示例
- Spring中如何动态注入Bean实例教程
- Android仿Boss直聘文本日期混合滚轮选择器示例
- Android中关于屏幕的三个小众知识(宽屏适配、禁止截屏和保持屏幕常亮)
- windows第七层负载均衡_基于IIS的ARR负载均衡详解
- 运用TensorFlow进行简单实现线性回归、梯度下降示例
- 200行代码轻松实现一个简单的区块链
- django使用django-apscheduler 实现定时任务的例子
- JS正则(RegExp)判断文本框中是否包含特殊符号
- js事件触发操作实例分析