1. 详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak
    <script type="text/javascript" language="javascript">
  2. //基于js写法
  3. function hb() {
  4. var tab = document.getElementById("subtable");
  5. var maxCol = , val, count, start;
  6. var ys = "";
  7. for (var col = maxCol - ; col >= ; col--) {
  8. count = ;
  9. val = "";
  10. for (var i = ; i < tab.rows.length; i++) {
  11. if (val == tab.rows[i].cells[col].innerHTML) {
  12. count++;
  13. } else {
  14. if (count > ) {
  15. //合并
  16. start = i - count;
  17. if (ys == "#00FFFF") {
  18. ys = "#EEEE00";
  19. } else {
  20. ys = "#00FFFF";
  21. }
  22. tab.rows[start].cells[col].rowSpan = count;
  23. tab.rows[start].cells[].style.backgroundColor = ys; //改变颜色
  24. // ys="#EEEE00";
  25. // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
  26. for (var j = start + ; j < i; j++) { //
  27. tab.rows[j].cells[col].style.display = "none";
  28. tab.rows[j].removeChild(tab.rows[j].cells[col]);
  29. }
  30. count = ;
  31. }
  32. val = tab.rows[i].cells[col].innerHTML;
  33. }
  34. }
  35.  
  36. if (count > ) { //合并,最后几行相同的情况下
  37. start = i - count;
  38. tab.rows[start].cells[col].rowSpan = count;
  39. for (var j = start + ; j < i; j++) {
  40. tab.rows[j].removeChild(tab.rows[j].cells[col]);
  41. }
  42. }
  43. }
  44. }
  45.  
  46. //基于Jquery写法
  47. //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
  48. //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
  49. //参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
  50. function _w_table_rowspan(_w_table_id, _w_table_colnum) {
  51. _w_table_firsttd = "";
  52. _w_table_currenttd = "";
  53. _w_table_SpanNum = ;
  54. _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
  55. _w_table_Obj.each(function (i) {
  56. if (i == ) {
  57. _w_table_firsttd = $(this);
  58. _w_table_SpanNum = ;
  59. } else {
  60. _w_table_currenttd = $(this);
  61. if (_w_table_firsttd.text() == _w_table_currenttd.text()) { //这边注意不是val()属性,而是text()属性
  62. _w_table_SpanNum++;
  63. _w_table_currenttd.hide(); //remove();
  64. _w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
  65. } else {
  66. _w_table_firsttd = $(this);
  67. _w_table_SpanNum = ;
  68. }
  69. }
  70. });
  71. }
  72.  
  73. //函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
  74. //参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
  75. //参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
  76. // 如果为数字,则从最左边第一行为1开始算起。
  77. // "even" 表示偶数行
  78. // "odd" 表示奇数行
  79. // "3n+1" 表示的行数为1、4、7、10.......
  80. //参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
  81. // 此参数可以为空,为空则指定行的所有单元格要进行比较合并。
  82. function _w_table_colspan(_w_table_id, _w_table_rownum, _w_table_maxcolnum) {
  83. if (_w_table_maxcolnum == void ) { _w_table_maxcolnum = ; }
  84. _w_table_firsttd = "";
  85. _w_table_currenttd = "";
  86. _w_table_SpanNum = ;
  87. $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function (i) {
  88. _w_table_Obj = $(this).children();
  89. _w_table_Obj.each(function (i) {
  90. if (i == ) {
  91. _w_table_firsttd = $(this);
  92. _w_table_SpanNum = ;
  93. } else if ((_w_table_maxcolnum > ) && (i > _w_table_maxcolnum)) {
  94. return "";
  95. } else {
  96. _w_table_currenttd = $(this);
  97. if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
  98. _w_table_SpanNum++;
  99. _w_table_currenttd.hide(); //remove();
  100. _w_table_firsttd.attr("colSpan", _w_table_SpanNum);
  101. } else {
  102. _w_table_firsttd = $(this);
  103. _w_table_SpanNum = ;
  104. }
  105. }
  106. });
  107. });
  108. }
  109.  
  110. </script>

[JS&Jquery]实现页面表格中相同内容的行或列合并的更多相关文章

  1. jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

  2. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  3. avalon.js的循环操作在表格中的应用

    avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...

  4. 如何让elemengUI中的表格组件相同内容的单元格自动合并

    1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...

  5. 根据excel表格中的内容更新Sql数据库

    关于[无法创建链接服务器 "(null)" 的 OLE DB 访问接口 SQL Server 2008读取EXCEL数据时,可能会报这个错误:无法创建链接服务器 "(nu ...

  6. javascript jquery 修改指定标签中的内容

    javascript jquery 修改指定标签中的内容 $("#test1").text("Hello world!"); document.getEleme ...

  7. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  8. jquery.dataTables表格中的内容怎么设置让它不自动换行

    在table中增加 style="white-space: nowrap;" ,这样会撑大td.会出现滚动条. 其他内容配置:每列宽度: "aoColumnDefs&qu ...

  9. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

随机推荐

  1. 简单的TCP代理服务器

    我之前的一篇文章(http://www.cnblogs.com/MikeZhang/archive/2012/03/07/socketRedirect.html )中介绍过用python写的一个简单的 ...

  2. Django学习---Form组件认证

    Form组件认证 能够帮助我们做用户认证. 以前写我们自己写用户认证的时候,我们自己写HTML的form表单,点击提交,数据就被发送到后台,后台进行验证.在验证过程中我们就需要自己去写正则表达式去匹配 ...

  3. TMS Grid

    TMS Grid http://edn.embarcadero.com/article/42553

  4. Xcode 中设置部分文件ARC支持

    ARC是什么 ARC是iOS 5推出的新功能,全称叫 ARC(Automatic Reference Counting).简单地说,就是代码中自动加入了retain/release,原先需要手动添加的 ...

  5. Node.js究竟是什么?

    来源:https://www.ibm.com/developerworks/cn/opensource/os-nodejs/index.html?ca=drs#ibm-pcon   Node 旨在解决 ...

  6. Redis搭建(七):Redis的Cluster集群动态增删节点

    一.引言 上一篇文章我们一步一步的教大家搭建了Redis的Cluster集群环境,形成了3个主节点和3个从节点的Cluster的环境.当然,大家可以使用 Cluster info 命令查看Cluste ...

  7. sqlserver job 执行时间

    select instance_id,jh.run_date,jh.job_id,jh.step_name, case jh.run_status then 'failed' then 'Succee ...

  8. Spring IoC入门

    ------------------siwuxie095                                 Spring IoC 环境搭建         1.先下载相关库文件,下载链接 ...

  9. python操作vmware

    import pysphere from pysphere import VIServer host_ip = "200.200.173.45" username = " ...

  10. mybatis框架入门程序:演示通过mybatis实现数据库的删除操作

    1.mybatis的基本配置工作可以在我的这篇博客中查看:https://www.cnblogs.com/wyhluckdog/p/10149480.html 2.删除用户的映射文件: <!-- ...