반응형
개요
| 순서 | 데이터1 | 데이터2 |
| 1 | Data1 | abcd |
| 2 | Data2 | efgh |
위 테이블의 행의 순서를 마우스로 이리저리 옮길 수 있게 하는 jquery 플러그인 tableDnD라는게 있다.
해당 라이브러리를 적용시키면
테이블 데이터를 마우스로 잡아서 순서2를 순서1의 위치로 옮겨놓을 수 있는 동적 테이블 기능을 한다.
소스코드
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<script>
function tabldD()
{
$("#table").tableDnD();
}
</script>
</head>
<body onLoad="tabldD()">
<table id="table" width="500px;" border='1'>
<tr>
<td id="btn1">aa</td>
<td>bb<td>
</tr>
<tr>
<td>cc</td>
<td>dd<td>
</tr>
</table>
</body>
</html>↓ 파일 다운로드 ↓
https://github.com/isocra/TableDnD
적용법
1. 위에서 다운 받은 첨부파일에서 두개의 js 파일을 추가시킨다. (코드줄 4~5)
2. 테이블에 DnD를 적용 시키기 위해 jquery 구문을 호출한다. (코드줄 8~11)
※ 유의사항
테이블에 데이터 추가나 수정이 일어난 경우 2번 과정을 다시 해야 변경된 테이블에 대하여 적용된다.
사용법 설명 참고
※ 테이블 생성 사이트
http://www.tablesgenerator.com/html_tables#
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| 유튜브 API를 사용해서 음악 재생목록 만들기 (4) | 2019.07.05 |
|---|---|
| HTML 태그 - 속성 정리 (0) | 2019.07.05 |
| Jquery 함수 모음 (0) | 2019.07.04 |
| CSS(Cascading Style Sheet) 문법 (0) | 2019.06.18 |
| 자바스크립트(javascript) 문법 모음 (0) | 2019.06.18 |
