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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);

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

티스토리 관리 스킨편집으로 들어가서 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>행에다가 붙여주면 됩니다.

그리고 발행하면 다음처럼 자동으로 번호가 증가되어 들어간 것을 볼 수 있어요! 

근데 매번 이렇게 행마다 class="autoInc"일일이 붙여주면 이것도 번거롭지않나고요?

노노~ 그 다음 행추가할 때부터는 얘네가 전에 행을 기준으로 붙여넣기 때문에 class="autoInc"를 써줄 필요가 없습니다.

확인해볼게요

아까 시험으로 작성해줬던 포스팅에서 수정을 누른 후,

중간 칸에서 아래 삽입을 눌러 행을 추가해줍시다. 행을 추가한 후에, html에 들어가서 그 행에 class="autoInc"코드 넣지 않고! 바로 발행해볼게요!

짠! 중간 행을 추가해줬음에도 불구하고 알아서 얘가 번호를 증가해줬어요.

ㅎㅎ

제 목록 포스팅도 사실 수정을 눌러보면

이렇게 번호 부분은 아무것도 작성하지 않았음에도 

번호 증가가 자동으로 잘 들어간 것을 볼 수 있어요

편집하기도 편하고! 추가하기도 편하고! 

도움됐으면 공감~!

myfunc.js