web/jquery

자동 colspan 되게 하는법

카시에르 2020. 4. 1. 08:52

서울시 예산회계 클린업 시스템 연간자금운용계획 에서

class="merge" 로 지정하여 자동 colspan 되는 방법

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
$(function() {
    //2013연간자금운용계획
    
    if($('input[name="othbcList.othbcListSn"]').val()==0){
        $('input:radio[name="othbcList.smsSndngAt"]:eq(1)').attr('checked'true);
        $('input:radio[name="othbcList.emailSndngAt"]:eq(1)').attr('checked'true);
    }
 
    $('#btn_guidance_sms').css("cursor""pointer").bind('click'function() {
        var iframeUrl = "/service/opendata/othbcDocInput/iscrSmsNoticePop.do";
        $("#popup05_frame").attr("src",iframeUrl);
        $('.popup05').dialog('open');
    });
    
    $('#btn_guidance_email').css("cursor""pointer").bind('click'function() {
        var iframeUrl = "/service/opendata/othbcDocInput/iscrEmailNoticePop.do";
        $("#popup06_frame").attr("src",iframeUrl);
        $('.popup06').dialog('open');
    });
    
    $('#btnExcelUpload').css("cursor""pointer").bind('click'function() {
        var param = "?bsnsPk=11545-900000642&othbcIemSn=346";
        param+= "&year="+$('#year').val();
        param+= "&uploadIemSeCode=04";
        var iframeUrl = "/service/opendata/othbcDocInput/iscrUploadExcelDivPop.do"+param;            
        $("#popup03_frame").attr("src",iframeUrl);
        $('.popup03').dialog('open');
    });
    
    $("#tabs").ttabs();
 
    //-------rowspan 적용하기--------//
    setRowspan(2);
    //-------------------------------//
 
    //-------colspan 적용하기--------//
    $.fn.mergeTable = function() {
        return this.each(function() {
            var $sibling_td, rowSpan, colSpan;
            // td colSpan merge
            $(this).find('tr').each(function(tr_idx, tr_el) {
                $(this).find('th').each(function(td_idx, te_el) {
                    if ($sibling_td == undefined) {
                        $sibling_td = $(this);
                        return;
                    }
                    if ($(this).hasClass('merge'&& $sibling_td.hasClass('merge'&& $(this).text() == $sibling_td.text()) {                        
                        colSpan = ($sibling_td.attr('colSpan'== undefined ? Number(1) : Number($sibling_td.attr('colSpan')));
                        $sibling_td.attr('colSpan', colSpan+1);
                        $(this).hide();                        
                    } else {
                        $sibling_td = $(this);
                    }
                });
                $(this).find('td').each(function(td_idx, te_el) {
                    if ($sibling_td == undefined) {
                        $sibling_td = $(this);
                        return;
                    }
                    if ($(this).hasClass('merge'&& $sibling_td.hasClass('merge'&& $(this).text() == $sibling_td.text()) {                        
                        colSpan = ($sibling_td.attr('colSpan'== undefined ? Number(1) : Number($sibling_td.attr('colSpan')));
                        $sibling_td.attr('colSpan', colSpan+1);
                        $(this).hide();                        
                    } else {
                        $sibling_td = $(this);
                    }
                });
            });
        });
    };
    $('table tbody').mergeTable();
 
});
 
/**
 * Row 확인
 */
function setRowspan(cols) {
    if (cols < 0return;
 
    var tName = "";
    var fIdx = 0;
    var count = 0;
    var rows = 0;
    var totRowspan = 0;
    //$('.tbl01>tbody>tr').each(function(n) {
    $('.tbl01>tbody>.trStart').each(function(n) {
        var imsiName = $(this).find('th:eq('+cols+')').text();
        
        //conlole.log("imsiName===>" + imsiName);
        
        if (tName != imsiName) {
            if (n > 0 && count > 1) {
                //var tdList = $('.tbl01>tbody>tr');
                var tdList = $('.trStart');
                for (i = fIdx + 1; i < n; i++) {
                    //$('.tbl01>tbody>tr:eq('+i+')').find('th:eq('+cols+')').remove();
                    $('.trStart:eq('+i+')').find('th:eq('+cols+')').remove();
                    
                }
                //$('.tbl01>tbody>tr:eq('+fIdx+')').find('th:eq('+cols+')').attr('rowspan', count);
                $('.trStart:eq('+fIdx+')').find('th:eq('+cols+')').attr('rowspan', count);
                //$('.trStart('+fIdx+')').find('th:eq('+cols+')').attr('rowspan', count);
            }
 
            totRowspan += (count - 1);
            tName = imsiName;
            fIdx = n;
            count = 0;
        }
 
        rows = n;
        count++;
    });
    setRowspan(cols - 1);
}
 
 
 
 
<tbody>
                    <!-- 시작부분 -->
                    <tr style="display: none;">
                        <td>
                            <input type="hidden" name="iemClNm" value="전월이월액" />
                               <input type="hidden" name="iemClNo" value="001001" />
                               <input type="hidden" name="dc" value="전월 또는 전년도 이월 예금 및 현금시재액(인출하여 보유하고 있는 소액현금) 잔액의 합" />
                           </td>
                     </tr>                    
                    
                        <tr class="trStart">
                            <th class="merge textAlignC">전월이월액</th>
                            <th class="merge textAlignC">전월이월액</th>
                            <th class="merge textAlignC">전월이월액</th>
                            <th class="merge textAlignC">전월이월액</th>
                                <td><input type="text" tabindex="2" name="amount" value="" class="inputBox02 textAlignR input_box" id="prevMonth" title="전월 또는 전년도 이월 예금 및 현금시재액(인출하여 보유하고 있는 소액현금) 잔액의 합" alt="currency"/></td>
                            <td class="last"><input type="text" title="입력" name="rm" value=""  class="inputBox02 textAlignL" /></td>
                        </tr>
                    
                    <!-- 시작부분 -->
                    <tr style="display: none;">
                        <td>
                            <input type="hidden" name="iemClNm" value="분양금수입" />
                               <input type="hidden" name="iemClNo" value="001002" />
                               <input type="hidden" name="dc" value="" />
                           </td>
                     </tr>                    
                    
                        <tr style="display: none;">
                            <td>
                                <input type="hidden" name="rm" value="" />
                                <input type="hidden" name="amount" value="" />
                            </td>
                        </tr>
                    
                    <!-- 20160524 웹표준1 -->
                    <tr style="display: none;">
                        <td>
                            <input type="hidden" name="iemClNm" value="조합원분양금수입" />
                               <input type="hidden" name="iemClNo" value="001002001" />
                               <input type="hidden" name="dc" value="" />
                           </td>
                     </tr> 
 
                        <!-- 20160524 웹표준2 -->
                        <tr style="display: none;">
                            <td class="merge textAlignC">
                                <input type="hidden" name="rm" value="" />
                                <input type="hidden" name="amount" value="" />
                            </td>
                        </tr>                        
                </tbody>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs