처음에 테이블에는 두개의 row 와 세개의 column이 있습니다. 여기에 한개의 컬럼을 더 추가하기를 원합니다.
Inserting dynamic column in a table
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<div id=table class=ui-grid-b>
<div class=ui-block-a>Element 1.1</div>
<div class=ui-block-b>Element 1.2</div>
<div class=ui-block-c id=insert>Element 1.3</div>
<div class=ui-block-a>Element 2.1</div>
<div class=ui-block-b>Element 2.2</div>
<div class=ui-block-c>Element 2.3</div>
</div>
</div>
</div>
</body>
</html>
<script>
$("#table").removeClass ("ui-grid-b").addClass ("ui-grid-c");
var html = "<div class=ui-block-d> Element 1.4 </div>";
$("#insert").after (html);
</script>
tistory444_01.html페이지가 시작할 때 CSS 클래스를 ui-grid-b에서 ui-grid-c로 바꾸도록 해 새로운 컬럼을 가지고 있는 테이블이 되도록 했습니다. 그 다음에 after () method 를 사용해서 insert identifier 에 의해 위치를 정해준 다음 해당 element를 insert 하게 됩니다.
원래 테이블은 두개의 줄과 세개의 컬럼이 있었습니다.
그런데 script 가 한번 돌고 나면 첫번째 줄의 끝에 컬럼이 하나 더 추가됩니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
|---|---|
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
| Ajax 로 테이블 삽입하기 (0) | 2012.11.06 |
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
| 버튼 Customize 하기 (0) | 2012.10.31 |