[javascript] code snippet 2

Tr event에서 선택한 td의 인덱스를 가져오고자 할 때

// double click
$('#tableElement tbody').on('dblclick', 'tr', function (e) {
    var cellindex =  e.target.cellIndex;    
    // exclude delete/ move cell
    if(cellindex != 5){
        var data = new Array();
        var td = $(this).children();
        td.each(function(i){
            data.push(td.eq(i).text());
        }); 
        displaySomething(this.rowIndex,data,'##');
    }
});

 

 

버튼을 누르면 refresh가 될 때

버튼을 누르면 의도와는 다르게 새로고침이 될 때가 있다.

그럴 때는 button에 해당하는 input element를 살펴봐야 한다.

<input type="button" ~~~>

type='button' 이 적혀있지 않을 가능성이 있다. 이럴때는 해당 부분을 추가해주면 된다.

 

 

Selectbox에서 같은 항목 선택했을 때에도 이벤트를 호출하려면

$(function () {
    var lastFocusValue = '';
    var focusState = 0;

    var changeWithRepeats = function (newestValue) {
        // Your change action here
        var target_value = $('.multi_target').val();
        if(newestValue != ''){
            if(target_value != ''){
                target_value += ','+newestValue;
            }else{
                target_value = newestValue;
            }
            $('.multi_target').val(target_value);
        }
    };
    $('.multi_select').click (function () {
        if (focusState == 1) { focusState = 2; return; }
        else if (focusState == 2) $(this).blur();
      }).focus(function (e) {
        focusState = 1;
        lastFocusValue = $(this).val();
      }).blur(function () {
        focusState = 0;
        if ($(this).val() == lastFocusValue) {
          // Same value kept in dropdown
          changeWithRepeats($(this).val());
        }
      }).change (function () {
        changeWithRepeats($(this).val());
      });
});

blur, focus event를 이용해서 상태전환을 한다. change 이벤트를 통해서는 selectbox에서 동일한 값을 선택했을 때를 handling 할 수 없다.

 

 

쉼표로 분리된 text에 동일한 글자 붙이기

$('SELECTOR').val().split(',').map( x => x.trim() + '[붙일단어]').join()

chain function, lambda function, map을 이용해서 한줄에 처리한다.

input ( with suffix '수')

비,밀,의,숲

output

비수,밀수,의수,숲수

접두사를 붙일려면 arrow function(lambda function)에서 x 와 붙일 단어의 위치를 바꾸면 된다 .

 

 

Jquery Object => DOM element

$('ELEMENT').get(0);

 

 

[object Obejct] 로 나오는 데이터를 보고싶을 때

console.log("Object data : " + JSON.stringify(data.something[0]));

JSON.stringify() 를 통해 확인할 수 있다.

 

 

Date picker option 인자 동적으로 생성해서 집어넣기

            var datePickerOption = new Object;
            var formOption = new Object;
            formOption[elementId] = '%Y-%m-%d';
            datePickerOption['formElements'] = formOption;
            datePickerController.createDatePicker(datePickerOption);

date picker option을 변수로 바로 집어넣으면 제대로 동작하지 않는다.

Option 객체를 따로 만들어서 해당 객체의 key값으로 elementid를 넣으면 동적으로 datepicker를 생성할 수 있다.

 

 

Js tree에 사용여부 집어넣기

<ul>
    <c:forEach var="item" items="${allThingList}" varStatus="status">
        <c:choose>
            <c:when test="${item.available.charAt(0) eq 'Y'.charAt(0)}">
                <c:set var="type" value="available"/>
            </c:when>
            <c:otherwise>
                <c:set var="type" value="unavailable"/>
            </c:otherwise>
        </c:choose>
        <c:if test="${thishierarchy+0 eq item.hierarchy+0}">
            <c:if test="${!status.first}">
                </li>
            </c:if>
            <li data-jstree='{"opened":true<c:if test="${THING_IDX eq item.THING_IDX && SUB_THING_IDX eq item.SUB_THING_IDX}">, "selected":true</c:if>, "type": "${type}"}'
                data-upper-sn="${item.THING_IDX}" data-sn="${item.SUB_THING_IDX}">${item.THING_NAME}
        </c:if>
        <c:if test="${thishierarchy+0 < item.hierarchy+0}">
            <ul>
                <li data-jstree='{"opened":true<c:if test="${THING_IDX eq item.THING_IDX && SUB_THING_IDX eq item.SUB_THING_IDX}">, "selected":true</c:if>, "type": "${type}"}'
                    data-upper-sn="${item.THING_IDX}" data-sn="${item.SUB_THING_IDX}">${item.THING_NAME}
        </c:if>
        <c:if test="${thishierarchy+0 > item.hierarchy+0}">
            <c:forEach begin="${item.hierarchy+1}" end="${thishierarchy}" step="1">
                </li>
            </ul>
            </c:forEach>
        </li>
        <li data-jstree='{"opened":true<c:if test="${THING_IDX eq item.THING_IDX && SUB_THING_IDX eq item.SUB_THING_IDX}">, "selected":true</c:if>, "type": "${type}"}'
            data-upper-sn="${item.THING_IDX}" data-sn="${item.SUB_THING_IDX}">${item.THING_NAME} </c:if>
            <c:set var="thishierarchy" value="${item.hierarchy}" />
    </c:forEach>
</li>
</ul>

 

 

테이블 TD 배경 고치기(충돌 일어날때)

우선순위의 문제이다. tr로 하면 이미 설정된 css 가 cascading 되어서 씹힌다. 우선순위가 밀리기 때문이다.

td를 직접 조작하면 된다.

$.each($('#Table > tbody > tr'),function(i,tr){
    var color = $(tr).find('td:eq(5)').text() == 'STOP' ? 'rgb(255, 204, 204)' : 'rgb(204, 204, 255)';
    $.each($(tr).find('td'),function(ind,td){
        $(td).css("background-color", color);
    }) 
});

 

happy 하다.