zoukankan      html  css  js  c++  java
  • [JS&Jquery]实现页面表格中相同内容的行或列合并

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak
    <script type="text/javascript" language="javascript"> //基于js写法 function hb() { var tab = document.getElementById("subtable"); var maxCol = 3, val, count, start; var ys = ""; for (var col = maxCol - 1; col >= 0; col--) { count = 1; val = ""; for (var i = 0; i < tab.rows.length; i++) { if (val == tab.rows[i].cells[col].innerHTML) { count++; } else { if (count > 1) { //合并 start = i - count; if (ys == "#00FFFF") { ys = "#EEEE00"; } else { ys = "#00FFFF"; } tab.rows[start].cells[col].rowSpan = count; tab.rows[start].cells[1].style.backgroundColor = ys; //改变颜色 // ys="#EEEE00"; // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色 for (var j = start + 1; j < i; j++) { // tab.rows[j].cells[col].style.display = "none"; tab.rows[j].removeChild(tab.rows[j].cells[col]); } count = 1; } val = tab.rows[i].cells[col].innerHTML; } } if (count > 1) { //合并,最后几行相同的情况下 start = i - count; tab.rows[start].cells[col].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].removeChild(tab.rows[j].cells[col]); } } } } //基于Jquery写法 //函数说明:合并指定表格(表格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()) { //这边注意不是val()属性,而是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 == void 0) { _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; } else if ((_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>
  • 相关阅读:
    Mac下安装svn服务器
    php 当前日期加一天和指定日期加一天
    MariaDB与MySQL
    JS中判断null、undefined与NaN的方法
    PHP保留两位小数的几种方法
    jquery的cookie插件
    mysql(5.7以上)查询报错:ORDER BY clause is not in GROUP BY..this is incompatible with sql_mode=only_full_group_by
    MySQL数据的导出和导入
    qrCode二维码字符串长度太多压缩的问题
    解决 img 标签上下出现的间隙
  • 原文地址:https://www.cnblogs.com/Ajoying/p/7886876.html
Copyright © 2011-2022 走看看