ProgrammingjQuery

(jQuery) 테이블 행 추가, 삭제 / 랜덤함수 이용

.append(), .eq(), .text(), jQuery, jQuery 테이블 행 추가 삭제, 랜덤 정수, 정수 랜덤

(jQuery) 테이블 행 추가, 삭제 / 랜덤함수 이용

테이블의 행을 추가한 후 선택한 행을 삭제해 보겠습니다. 결과를 확인하고 싶으시면 아래의 Result 버튼을 클릭하면 됩니다.

좀 더 자세히 보자면 랜덤 함수를 통해 정수 값을 구했습니다.

1
2
3
4
var randomInt = Math.floor(Math.random() * 100);
  // 0부터 99까지의 숫자를 출력합니다. floor함수를 사용하지 않으면 정수가 아닌 실수가 출력됩니다.
randomInt += ' %';
$("#humi tr td").eq(-2).text(randomInt);

그리고 아래의 함수를 바로 선언하면 JSFiddle에서 오류가 나서 밑에와 같이 window를 사용한 것입니다.

1
2
3
4
5
6
7
//JSFiddle에 맞춘 함수
window.fnDelTable = function(_this) {
    var _id = $(_this).closest('table').attr('id');
    var tbody = $(_this).closest('tbody');

    $(_this).closest('tr').remove();
}

위와 아래의 함수는 같은 기능을 가지고 있습니다. 원래는 아래와 같이 사용한 것을 JSFiddle에 맞추어 약간 변형했습니다.

1
2
3
4
5
6
7
//원래 사용한 방식
function fnDelTable(_this) {
    var _id = $(_this).closest('table').attr('id');
    var tbody = $(_this).closest('tbody');

    $(_this).closest('tr').remove();
}

-Reference
https://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net

Share