table 요소를 컨트롤하는 방법들 갈무리

• 테이블 검색창에 키워드 입력 즉시 검색어가 포함된 행만 표출하기

$("#searchbox").keyup(function(){
    var searchText = $(this).val();
    $("#table > tbody > tr").hide();
    var keyword = $("#table > tbody > tr > td:contains('"+ searchText +"')");
    $(keyword).parent().show();
});

 

 

---

• 테이블 요소 클릭 시 수정할 수 있도록 입력창으로 표출하기

$("#table tbody").on('click', 'td:nth-child(5)', function (e) {
    if($(this).children("input").length > 0)
         return false;

    var tdObj = $(this);
    var preText = tdObj.html();
    var inputObj = $('<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, \'\');" />');
    tdObj.html("");

    inputObj
    .width('50px')
    .height(tdObj.height())
    .val(preText)
    .appendTo(tdObj)
    .trigger("focus")
    .trigger("select");

    inputObj.keyup(function(event){
        if(13 == event.which) {  // press enter-key        
            var text = $(this).val();
            tdObj.html(text);
        } else if(27 == event.which) {  // press ESC-key
            tdObj.html(preText);
        }
    }); 

    inputObj.blur(function(event){
        var text = $(this).val();
        tdObj.html(text);
    })

    inputObj.click(function(){
        return false;
    });
});

 

 

---

• 테이블 행을 드래그하여 순서 변환하기

var row;

function dragStart() {
    row = event.target;
}

function dragOver() {
    var e = event;
    e.preventDefault();

    var children = Array.from(e.target.parentNode.parentNode.children);
    try {
        if(children[0].tagName == "TR") {
            if(children.indexOf(e.target.parentNode) > children.indexOf(row)) {
                e.target.parentNode.after(row);
            } else {
                e.target.parentNode.before(row);
            }
        }
    } catch(e) {
        return;
    }
}

 

 

행 속성을 아래와 같이 추가해준다.

<tr draggable="true" ondragstart="dragStart()" ondragover="dragOver() " role="row" class="even">
    <td>element1</td>
    <td>element2</td>
</tr>