[티스토리 tistory]자바스크립트 사용해서 테이블 자동증가 하는 법(javascript, autoincrement)

내맘대로 쓰는 기타

[티스토리 tistory]자바스크립트 사용해서 테이블 자동증가 하는 법(javascript, autoincrement)

양햄찌(jhnyang) 2019. 2. 14. 10:07

[티스토리 tistory] javascript 파일 등록해서

테이블 번호 자동증가 활용하기

안녕하세요~~오늘은 티스토리에 자바스크립트 파일 등록해서

테이블 자동증가하는 법을 알아볼게요~

테이블 번호 자동증가? 언제 써?

테이블 자동증가가 뭐냐면..

이런 글 올리고 싶을 때! 저거는 제가 가지고 있는 책 목록을 올린 게시글인데요.

저 행의 갯수 1,2,3,4,5 이런거 책이 100권이나 된다면 얼마나 쓰기 힘들겠어요. 알아서 행 개수를 세서 넣어주면 좋으련만!

그 외에 중간에 저기 행이 하나 추가되면 숫자가 그 행부터 1씩 번호가 주르륵 밀리겠죠?

그러면 뒤에 전체 행을 다 수정해줘야 해요.

책은 계속 늘어날거가고 중간중간 행을 삽입해줘야할텐데 계속 번거로워질거같아서 이번 일을 같이 수행해보려고 합니다.

티스토리에서 자바스크립트 코드 어떻게 사용해?

원래는 글 쓸때 보이는 HTML에다가 javascript 코드를 넣어서 작성하려고 했는데

보안문제 때문인지 글쓰기에 javascript를 자유자재로 사용할 수 없더라고요 ㅠㅠ

티스토리 운영자님(?) 자유도를 좀 더 주세요 ㅠㅠ (네이버는 html편집도 안되니까.. 티스토리가 이런건 좀 더 낫긴한데.. 사진첨부 매번 하는것도 불편해에 ㅠ)

티스토리 스킨 편집에 파일 업로드 기능이 있더군요! 자바스크립트 파일을 업로드 하는 방식으로 구현해볼게요.

일단 자동 증가기능을 수행해줄 스크립트 파일을 대강~ 대충~ 작성해줄게요. 파일명은 myfunc.js로 했습니다.

그냥 autoInc이라는 클래스가 보이면 넘버링 하고 개수를 세는 아주아주 간단한 코드예요.

1
2
3
4
5
6
7
8
function autoIncrement(startnum){    
      var init = startnum;    
      var td_list = document.getElementsByClassName("autoInc");  
      for(var i=0; i<td_list.length; i++){    
              init++;    
              td_list[i].innerHTML= "&nbsp"+init;    
}};
autoIncrement(0);
Colored by Color Scripter
cs

이게 다지만 혹시 몰라서 스크립트 업로드 해놨습니다.

티스토리 관리 스킨편집으로 들어가서 HTML 편집을 눌러줍시다.

파일 업로드에 가서 추가를 눌러 방금 작성한 myfunc.js를 업로드해주세요

제대로 업로드가 됐다면 저렇게 파란색으로 images/myfunc.js가 뜰겁니다.

그러면 방금 업로드한 자바스크립트 함수를 호출해줘야하니 HTML로 넘어갈게요.

먼저 저 head 태그 사이 (파란색 태그 두 개 사이에) 1번이라고 쓴 <script type="text/javascript" src="./images/myfunc.js></script>을 추가해줍시다. 우리가 작성한 파일을 사용할거라고 어딨는지 경로를 알려주는거예요.

그리고 head태그 밖으로 나오자마자 보이는 body태그에 위처럼 onload="autoIncrement();"를 추가해줄게요

페이지가 실행되면 우리가 작성한 코드를 호출하는 거예요.

다 했으면 적용 버튼 클릭!

게시글 작성하기

이제 게시글을 작성해볼까요?

아까 자바스크립트 코드를 확인해보면 알 수 있듯이 autoInc이라는 이름을 붙여주면 얘를 인식해 개수를 세어주는 코드예요.

먼저 표를 생성한 후 확인해볼게요.

여기 보면 HTML 보이죠? 눌러서 코드 스크립트로 넘어갈게요.

그러면 표에 해당하는 코드가 이렇게 생겼어요.

여기서 자동번호 증가 기능을 부여하고 싶으면 그림처림 ctrl+F를 눌러서 <tr><td>부분을 찾은 뒤 그 행의 뒷부분에 class="autoInc" 을 부여해줍시다!

<tr></tr>은 한 행을 의미해요

그리고 그 안에 있는 <td>들은 칸을 의미합니다. 즉 맨 앞칸에 자동증가 번호를 부여하고 싶으면 tr다음에 나오는 td에다가 class="autoInc"를 붙여주고 마지막 칸에 번호를 부여하고 싶을 경우에는 <tr></tr>사이의 가장 마지막 <td>행에다가 붙여주면 됩니다.