`
juzhibest
  • 浏览: 55272 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

转载的 JQ 合并单元格功能

jQueryJavaScriptCSSWebHTML 
阅读更多

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>

分享到：
| 随记WeekTreat
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery datatable 单元格合并

    要启用单元格合并，我们需要利用其自定义的回调函数和DOM操作。 1. **初始化Datatable**： 首先，我们需要在HTML中创建一个表格，并在JavaScript中初始化DataTable。设置基本参数，如数据源、列定义等： ```html...

    jqgrid合并单元格，合并行、合并列

    jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-...

    jquery 动态合并单元格的实现方法

    ////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成：tds[6].attr("rowSpan", 2);

    js实现表格相同数据合并

    为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...

    使用jQuery 操作table 完成单元格合并的实例

    总结来说，通过jQuery操作表格的单元格合并，主要是利用选择器选取特定的单元格，通过条件判断和循环来比较内容，然后通过改变`rowspan`属性和隐藏不需要的单元格来实现视觉上的合并。这个过程涉及到HTML表格的基本...

    jquery miniui 教程 表格控件 合并单元格应用

    在本教程中，我们将专注于jQuery MiniUI中的表格控件及其一个特殊的功能——合并单元格。 表格控件是网页设计中不可或缺的一部分，它允许数据以结构化的形式展示。在某些情况下，为了使数据更易于理解或美化布局，...

    JQuery实现表格中相同单元格合并示例代码

    ### JQuery实现表格中相同单元格合并示例代码知识点 #### 一、JQuery与表格单元格合并的基本概念 JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、DOM操作、动画和Ajax交互等...

    jquery实现的类似excel功能的表格

    可编辑的类似于excel功能的jQuery开发的表格，功能上还有很多的缺陷...目前的问题还有在 IE低版本上还存在着合并时只将单元格删除没有添加colspan这个属性，不知道是什么情况。 本人:笨熊熊 QQ:26732421 期待高手指点!

    jquery table 合并相同列

    在处理表格（table）时，有时我们希望将具有相同内容的单元格（cells）进行合并，以优化视觉效果，提高用户体验。标题“jquery table 合并相同列”所提及的问题正是关于如何利用 jQuery 来实现这一功能。 首先，...

    Jquery datagrid实现单元格编辑

    本篇将详细介绍如何使用jQuery DataGrid实现单元格编辑功能。 首先，我们需要引入jQuery和jqGrid的库文件。通常，这包括jQuery核心库、jQuery UI库以及jqGrid的CSS和JS文件。确保在HTML页面中正确地添加这些引用： ...

    jQuery实现合并表格单元格中相同行操作示例

    jQuery作为JavaScript的一个快速、小巧、功能丰富的库，提供了一种方便的方式实现表格行中的单元格合并操作。 在本示例中，我们将通过jQuery实现合并表格中相同行的单元格操作。这种方法不仅能够帮助开发者减少重复...

    jq图片预览功能.zip

    本项目"jq图片预览功能.zip"是利用jQuery实现的一个图片预览功能，具备图片旋转、缩放以及下载等实用特性。这个功能对于网页上的图像展示，尤其是用户上传图片或在线查看图片时，提供了很好的用户体验。 首先，...

    基于jquery的合并table相同单元格的插件(精简版)

    通过这个插件，开发者无需手动修改表格HTML，就能快速实现单元格合并，极大地提高了工作效率。 总结来说，这款基于jQuery的合并相同单元格插件，利用JavaScript的数组遍历和DOM操作，实现了对表格数据的智能整理，...

    jq分页与选中功能.zip

    在这个"jq分页与选中功能.zip"压缩包中，包含的是两个基于jQuery实现的小功能示例：一个用于实现分页效果，另一个涉及复选框的选中和删除功能。下面我们将详细探讨这两个知识点。 首先，让我们讨论分页功能。在网页...

    jQ带记事功能的全年日历插件.zip

    记事功能的实现主要依赖于JavaScript（JS）的事件监听和DOM操作，通过点击日期单元格触发添加或编辑备忘的操作，同时将数据存储在本地或者服务器端，确保数据的持久化。 其次，自定义高亮日期样式是这款插件的另一...

    jq6500语音芯片

    总的来说，jq6500语音芯片是一个功能强大的音频处理元件，配合相应的驱动程序和开发资源，开发者可以轻松地在各种项目中集成语音功能。从压缩包提供的资料来看，无论是初学者还是经验丰富的工程师，都能找到足够的...

    jq安装包rpm.rar

    2. **转换**：`jq`可以将复杂的JSON数据结构转换为更简单的形式，或者将多个JSON对象合并为一个。 3. **格式化**：它可以将JSON数据格式化为易于阅读的输出，这对于调试和查看JSON文件非常有用。 4. **操作符和...

    利用jq实现倒计时功能

    利用jq实现倒计时功能，添加jquery.min.js js库的引用即可使用，代码有提示

    jqweui上传图片功能-asp.net core

    在本文中，我们将深入探讨如何在ASP.NET Core框架下实现jqweui的图片上传功能，同时结合.NET 6和Visual Studio 2022进行开发。这个功能包括图片的上传、预览、删除以及服务器端的同步操作。由于实际代码可能较为复杂...

    jQ 展开收缩效果

    在网页设计和开发中，交互性和用户体验是至关重要的因素，jQuery作为一个强大的JavaScript库，极大地简化了这些任务...在设计网上商城或其他Web应用时，合理运用这一功能，可以为用户带来更流畅、更人性化的浏览体验。

Magicbox
Global site tag (gtag.js) - Google Analytics