prev()

 

next()

 

 

<div>
   <button class="button1">다음 요소의 색을 변경하자. Click me!</button>
   <button class="button2">이전 요소의 색을 변경하자. Click me!</button>
</div>

 

 

// 다음 요소에 대한 색상 변경
$('.button1').click(function() {
   $(this).next().css('color', 'red');
});

// 이전 요소에 대한 색상 변경
$('.button2').click(function() {
   $(this).prev().css('color', 'red');
});

 

 

참고 : https://webisfree.com/2015-02-17/[jquery]-%EC%9D%B4%EC%A0%84-%EB%98%90%EB%8A%94-%EB%8B%A4%EC%9D%8C-%EC%9A%94%EC%86%8C-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0-prev()-next()

 

[jQuery] 이전 또는 다음 요소 선택하기, prev(), next()

제이쿼리 선택자 방법으로 부모나 자식요소를 선택하는 parent(), children() 등이 매우 자주 사용되죠.

webisfree.com

 

 

'web > jquery' 카테고리의 다른 글

주문 번호가 같은 row 병합  (0) 2020.04.01
자동 colspan 되게 하는법  (0) 2020.04.01

주문번호가 같을때 rowspan 되게 하는건데 막코딩해서 버그가 많을듯 예상

 

좀더 수정필요

 

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
//주문번호가 같은 row병합
    function mergeCell(){
        var spanArr = []; //같은 row갯수
        var delArr = []; //삭제할 row
        var flag = true; //삭제 flag
        var stdCnt = 0; //기준갯수
        $('.orderNum').each(function(oindex, ovalue){
            var cnt = 0;
            var htmlOri = $(ovalue).html();
            
            var i = oindex;
            while(ovalue){
                
                var htmlNext = $('.orderNum').eq(i).html();
                //console.log('ovalue : ' + ovalue + "  i: " + i + "  htmlNext : " + htmlNext + "  htmlOri : " + htmlOri);
                if(htmlOri == htmlNext && flag){
                    cnt++;
                }else{
                    break;
                }
                
                i++;
                
            }
            
            /* $('.orderNum').each(function(nindex, nvalue){
                var htmlNext = $(nvalue).html();
                
                if(htmlOri == htmlNext && flag){
                    cnt++;    
                }
            }); */
            if(!flag){ //병합할 셀 다음셀인지 확인하여 flag 설정
                stdCnt--;
                if(stdCnt == 1){
                    flag = true;
                }
            }
            
            
            if(cnt > 1){ //병합할셀이 여러개일 경우 갯수만큼 다음 셀 카운트 안함
                stdCnt = cnt;
                flag = false;
            }
            
        });
        
        //삭제할 row 배열에 담기
        $('.orderNum').each(function(oindex, ovalue){
            var cnt = spanArr[oindex];
            if(cnt > 1){
                $(ovalue).attr('rowspan', cnt);
                var ncnt = cnt - 1;
                $('.orderNum').each(function(nindex, nvalue){
                    if(oindex < nindex && ncnt > 0){
                        //$(nvalue).remove();
                        delArr.push(nindex);
                        ncnt--;
                    }
                })
            }
        });
        
        //삭제하면 index가 줄기 때문에 거꾸로 삭제 해온다
        for(var j=delArr.length ; j>=1 ; j--){
            $('.orderNum').each(function(oindex, ovalue){
                if(oindex == delArr[j-1]){
                    
                    $(ovalue).remove();
                }
            });
        }
    }
 
 
 
<c:choose>
    <c:when test="${fn:length(resultList) > 0}">
        <c:forEach var="list" items="${resultList}" varStatus="status">
                <tr>
                    <td class="tdl">
                        <c:if test="${list.fidx ne null && list.fidx ne '' }">
                            <p class="checkbox-02">
                                <input type="checkbox" name="checkId" id="chk_${list.fidx}" value="${list.fidx }"/>
                                  <label for="chk_${list.fidx}"></label>
                              </p>
                          </c:if>
                    </td>
                    <td class="tdl listNum">${list.listNum }</td>
                    <td class="registTimestamp">${list.crdatetime }</td>
                    <td class="orderNum word_allbreak">
                        <c:choose>
                            <c:when test="${list.orderSt eq '0010' }">
                                <a href="#none" onclick="moveModi('${list.orderNum}', '${list.orderSt }');">${list.orderNum}</a>
                            </c:when>
                            <c:otherwise>
                                <a href="#none" onclick="moveModi('${list.orderNum}', '');">${list.orderNum}</a>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td class="word_allbreak">
                        <a href="#none" onclick="moveModiSub('${list.orderSubNum}', '${list.orderSt }');">${list.orderSubNum}</a>
                    </td>
                    
                    <td>${list.partnerName }</td>
                    <td>${list.vendorNm }</td>
                    <td class="custprice"><fmt:formatNumber  pattern="#,###"  value="${list.orderPrice }"/></td>
                    <!--<td class="custprice"><fmt:formatNumber  pattern="#,###"  value="${list.orderVat }"/></td>  -->
                    <td class="custprice"><fmt:formatNumber  pattern="#,###"  value="${list.orderAmt }"/></td>
                    <td>${list.bkCustName }</td>
                    <td class="prtnrChargerNm">${list.empName }</td>
                    <td class="tl"><span class="web_step${list.orderSt }">${list.orderStNm }</span></td>
                    <td>
                        <c:if test="${list.fidx ne null && list.fidx ne '' }">
                            <a href="#" onclick="javascript:fileDown('${list.fidx}'); return false;"><img src="/cmmImg/content/list_file_icon.png" alt="첨부파일 있음"></a>
                        </c:if>
                    </td>
                    <!-- pws 숨김처리
                    <td>
                        <span class="pws_ing">P</span>
                        <span class="pws_end">P</span>
                        <span class="pws_stop">P</span>
                        
                    </td>
                      -->
                </tr>
        </c:forEach>
    </c:when>
    <c:otherwise>
                <tr>
                      <td class="lt_text3" colspan="13"><spring:message code="common.nodata.msg" /></td>
                  </tr>
    </c:otherwise>
</c:choose>        
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

'web > jquery' 카테고리의 다른 글

jquery 이전 또는 다음 요소 선택  (0) 2020.04.01
자동 colspan 되게 하는법  (0) 2020.04.01

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

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 < 0) return;
 
    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

'web > jquery' 카테고리의 다른 글

jquery 이전 또는 다음 요소 선택  (0) 2020.04.01
주문 번호가 같은 row 병합  (0) 2020.04.01

+ Recent posts

티스토리툴바