`

table 合并表格

    博客分类：
  • js
 
阅读更多

 

  1. jquery-latest.js"
  2. !function($){  
  3.  $.fn.rowspan=function(options){  
  4.  var defaults = {}  
  5.  var options = $.extend(defaults, options);  
  6.  this.each(function () {  
  7.   
  8.  var tds=$(this).find("tbody td:nth-child("+options.td+")");  
  9.  var current_td=tds.eq(0);  
  10.  var k=1;  
  11.  tds.each(function(index, element) {  
  12.  if($(this).text()==current_td.text()&&index!=0){  
  13.  k++;  
  14.  $(this).remove();  
  15.  current_td.attr("rowspan",k);  
  16.  current_td.css("vertical-align","middle");  
  17.  }else{  
  18.  current_td=$(this);  
  19.  k=1;  
  20.  }  
  21.  });  
  22.   
  23.  })  
  24.  }  
  25. }( window.jQuery );  
  26. -------------------------------------------------------------------------------------------------------------------------
  27. html 页面
  28.   <html>
  29.   <head>
  30.   <script src="jquery-1.8.3.min.js"></script>
  31.    
  32. <script src="jquery-latest1.js"></script>    
  33. <script type="text/javascript">
  34.  $(document).ready(function(){
  35.  $("#my-table").rowspan({td:1});  
  36. });
  37.    </script>    
  38.   </head>
  39.     <body>
  40.     <table id="my-table" cellpadding="2" cellspacing="0" border="1">  
  41.      <thead>  
  42.      <tr>  
  43.      <th>姓名</th>  
  44.      <th>学科</th>  
  45.      <th>学分</th>  
  46.      </tr>  
  47.      </thead>  
  48.      <tbody>  
  49.      <tr>  
  50.      <td>小铭</td>  
  51.      <td>数学</td>  
  52.      <td>100</td>  
  53.      </tr>  
  54.      <tr>  
  55.      <td>小铭</td>  
  56.      <td>英语</td>  
  57.      <td>100</td>  
  58.      </tr>  
  59.      <tr>  
  60.      <td>小铭</td>  
  61.      <td>化学</td>  
  62.      <td>100</td>  
  63.      </tr>  
  64.      <tr>  
  65.      <td>小铭</td>  
  66.      <td>美术</td>  
  67.      <td>100</td>  
  68.      </tr>  
  69.      <tr>  
  70.      <td>小红</td>  
  71.      <td>数学</td>  
  72.      <td>100</td>  
  73.      </tr>  
  74.      <tr>  
  75.      <td>小红</td>  
  76.      <td>英语</td>  
  77.      <td>100</td>  
  78.      </tr>  
  79.      <tr>  
  80.      <td>小红</td>  
  81.      <td>化学</td>  
  82.      <td>100</td>  
  83.      </tr>  
  84.      <tr>  
  85.      <td>小红</td>  
  86.      <td>美术</td>  
  87.      <td>100</td>  
  88.      </tr>  
  89.      </tbody>  
  90.     </table>  
  91.     </body>
  92.     </html>
分享到：
| 汇总常用的jQuery操作Table tr td方法
评论
发表评论

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

相关推荐

    el-table合并列 合并单元格

    el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。

    layui table合并单元格.zip

    "layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...

    vue-easytable合并单元格

    在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`&lt;td&gt;`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...

    table自动合并相同值得单元格的例子

    一个简单的自动合并相同值单元格的例子，简单易懂

    table合并单元格的多种方法

    这里我们将详细探讨六种合并表格单元格的方法。 1. **HTML中的`colspan`和`rowspan`属性** HTML表格元素中的`&lt;td&gt;`（表格数据单元格）支持`colspan`和`rowspan`属性。`colspan`用来指定单元格跨越的列数，而`...

    合并table的行

    当面对大量重复或相似的数据时，合并表格行的功能可以极大地提升数据展示的清晰度和用户体验。本文将深入探讨如何实现“合并table的行”这一功能，以及其背后的原理与应用场景。 ### 合并table的行：原理与实现 在...

    table-rowspan表格自动合并单元格插件

    通过这个"table-rowspan表格自动合并单元格插件"，开发者可以轻松地实现复杂表格布局的动态管理，提升用户体验，同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用，是前端...

    完美的table单元格合并js

    本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。

    JSP Table 单元格合并

    ### JSP Table 单元格合并 在网页开发中，表格是展示数据的重要方式之一。为了使表格看起来更简洁明了，在某些情况下我们需要对相同的单元格进行合并处理。本篇文章将详细探讨如何在 JSP（JavaServer Pages）环境中...

    LayUiTable表单相同参数的单元格合并

    在IT领域，尤其是在前端开发中，LayUI是一个广受欢迎的轻量级前端框架，它提供了丰富的组件，如表格（Table）、按钮、表单等，用于构建用户界面。本话题聚焦于LayUI中的Table组件，特别是如何实现相同参数的单元格...

    table数据相同合并单元格

    table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan 【table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan】

    table表格按列合并相同数据行单元格代码

    在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...

    bootstrap表格列合并

    在Bootstrap中，表格（Table）组件是用于展示结构化数据的一种方式。在某些情况下，我们可能需要对表格的列进行合并，以便更好地组织信息或者优化视觉效果。本篇文章将详细探讨如何在Bootstrap中实现表格列合并，...

    bootstrap-table导出合并单元格

    在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性，允许用户在导出表格时，将具有相同内容的单元格进行合并，以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...

    表格合并table单元合并

    ### 表格合并table单元合并知识点详解 #### 一、表格合并的概念 表格合并是指将具有相同内容或符合特定逻辑关系的多个单元格合并为一个单元格的过程。这种操作常见于电子表格软件（如Microsoft Excel）中，但在网页...

    jquery table 合并相同列

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

    原生JS实现HTML－ TABLE 自动行合并插件

    类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...

    Vxe Table/Grid 单元格分组合并

    Vxe Table/Grid 单元格分组合并

    JS 实现Table相同行的单元格自动合并示例代码

    总的来说，自动合并表格单元格是一个简单而又实用的技巧，可以帮助前端开发者优化网页内容的展示。通过上面提供的JavaScript函数和HTML示例，我们可以快速实现这一功能，并将其应用到实际的Web开发工作中。

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