关于页面中table中相同的列自动合并

代码如下:

<!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/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="C:/Users/xqq/Desktop/Study/jquery/jquery.min.js"></script> 

<script type="text/javascript">
(function($) {
    $.fn.mergeCell = function(options) {
        return this.each(function() {
            var cols = options.cols;
            for ( var i = cols.length - 1; cols[i] != undefined; i--) {
                mergeCell($(this), cols[i]);
            }
            dispose($(this));
        });
    }; 

    function mergeCell($table, colIndex) {
        $table.data(‘col-content‘, ‘‘); // 存放单元格内容
        $table.data(‘col-rowspan‘, 1); // 存放计算的rowspan值 默认为1
        $table.data(‘col-td‘, $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
        $table.data(‘trNum‘, $(‘tbody tr‘, $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 

        // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
        $(‘tbody tr‘, $table).each(function(index) {
            // td:eq中的colIndex即列索引
            var $td = $(‘td:eq(‘ + colIndex + ‘)‘, this);
            // 取出单元格的当前内容
            var currentContent = $td.html();
            // 第一次时走此分支
            if ($table.data(‘col-content‘) == ‘‘) {
                $table.data(‘col-content‘, currentContent);
                $table.data(‘col-td‘, $td);
            } else {
                // 上一行与当前行内容相同
                if ($table.data(‘col-content‘) == currentContent) {
                    // 上一行与当前行内容相同则col-rowspan累加, 保存新值
                    var rowspan = $table.data(‘col-rowspan‘) + 1;
                    $table.data(‘col-rowspan‘, rowspan);
                    // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
                    $td.hide();
                    // 最后一行的情况比较特殊一点
                    // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
                    if (++index == $table.data(‘trNum‘))
                        $table.data(‘col-td‘).attr(‘rowspan‘, $table.data(‘col-rowspan‘));
                    } else { // 上一行与当前行内容不同
                        // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
                        if ($table.data(‘col-rowspan‘) != 1) {
                            $table.data(‘col-td‘).attr(‘rowspan‘, $table.data(‘col-rowspan‘));
                        }
                        // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
                        $table.data(‘col-td‘, $td);
                        $table.data(‘col-content‘, $td.html());
                        $table.data(‘col-rowspan‘, 1);
                    }
                } 

        });
    } 

    // 同样是个private函数 清理内存之用
    function dispose($table) {
        $table.removeData();
    }
})(jQuery); 

$(function() {
    $(‘#process‘).mergeCell({
        cols: [0,2]
    });
});
</script> 

  </head>

  <body>
    <table id="process" cellpadding="2" cellspacing="0" border="1">
     <thead>
                                        <tr>
                                            <th>终端名称</th>
                                            <th>业务类型</th>
                                            <th>支付方式</th>
                                            <th>交易笔数</th>
                                            <th>交易金额(元)</th>
                                            <th>退款笔数</th>
                                            <th>退款金额(元)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            <tr>
                                                <td>***001</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>17.20</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***001</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>10</td>
                                                <td>3406</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***001</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>813.01</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>8.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>13</td>
                                                <td>3280</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>6</td>
                                                <td>3346.56</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***003</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>116</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***003</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>5.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>3</td>
                                                <td>17.40</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>10</td>
                                                <td>2397</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>3</td>
                                                <td>709.28</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***005</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>2</td>
                                                <td>437.87</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***005</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>1600</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>8</td>
                                                <td>2351</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>20.20</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>549.12</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>6311</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>9</td>
                                                <td>2091.63</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>5.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***009</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>2</td>
                                                <td>1142.03</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***009</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>60</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***014</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>422.11</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***015</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>268.70</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>合计 总机器数:10</td>
                                                <td>全部</td>
                                                <td></td>
                                                <td>100</td>
                                                <td>29376.51</td>
                                                <td>0</td>
                                                <td>0.00</td>
                                            </tr>
                                    </tbody>

</table> 

  </body>
</html>
时间: 2024-12-10 21:02:40

关于页面中table中相同的列自动合并的相关文章

layui中table表格的操作列(删除,编辑)等按钮的操作

1 //编辑,删除,发布申请 2 table.on('tool(demo)', function(obj){ 3 var data = obj.data; 4 // console.log(data) 5 if(obj.event === 'check'){ 6 // console.log(data.id); 7 $('.textCon').val(""); 8 layer.open({ 9 title: '发布申请' 10 ,type: 1 11 ,maxmin:true 12 ,

【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redirect(Request.UrlReferrer.ToString());} else { //没有来路地址 Response.Redirect("index.aspx"); 二.Js获取table中的行数与列数 var table =document.getElementById(&qu

Jquery Ajax 异步设置Table中某列的值

可根据table中某列中的ID去改变某列的值! JS: 1 $(document).ready(function () { 2 setTimeout(GetDate, 1000); 3 4 }); 5 6 function GetDate() { 7 $("#tbData tbody").find("tr").each(function () { 8 var prjectBalanceObj = $(this).find("td:eq(3)");

Table中合并相同内容列+Excel中合并相同内容列。

Table中合并相同内容列的方法比较好办,网上代码也很多,参照了一些把它封装成jquery 插件,调用起来还是蛮好用的. 这个地方稍微修改了下,有的时候td中内容虽然一样,但是数据库中的value却是不一样的,比如不同的公司,都有人事部,财务部, 公司A的财务部和公司B的财务部不能合并起来,所以我就给td加了个name属性.用于保存部门的ID,集团里面各公司部门ID总归不一样. 调用方式 $(function() {                            $("#tbdianba

用JavaScript,获取Table中指定的行、列

<html> <head runat="server"> <title>演示获取Table的值</title> <script type ="text/javascript" language ="javascript" > // Description: 演示用JavaScript,获取Table中指定行.列元素值 // CopyRight: http://www.cnblogs.co

JavaScript实现获取table中某一列的值

JavaScript实现获取table中某一列的值 1.实现源码 <!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/1999/xhtml"> <head> &

JavaScript获取table中某一列的值的方法

1.实现源码 <!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/1999/xhtml"> <head> <meta http-equiv="C

TABLE中动态设置poplist的值跟着当前行的某些列动态变化

核心方法 OAAdvancedTableBean table = (OAAdvancedTableBean)webBean.findChildRecursive("TimeEntryTbl"); OAMessageChoiceBean elePoplist = (OAMessageChoiceBean)table.findChildRecursive("ElementSelect"); elePoplist.setListVOBoundContainerColumn

表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示

有时候为了在搜索时清楚直观,需要关键字的高亮显示, 效果如下: 思想:在下面table中,本来应该是直接渲染数据,此时,可以先写一个方法,里面包含两个参数,分别是该显示的内容以及进行搜索时输入的关键字,在该方法中,进行判断,若是该列内容中包含关键字,则将关键字颜色改变,然后替换掉:若是没有,则还是原样显示. 表单中: table表格中: 此时需要写关键字高亮显示的方法: 在该方法中,可以使用if判断来进行替换,也可以使用正则来写. 原文地址:https://www.cnblogs.com/520