개-발

Express.js로 홈페이지를 제작중이다.

HTML으로 테이블을 작성했는데 검색 기능을 추가하고 싶었다.

복잡해서 쉽게 멋진 예제를 검색하던 중,

Jquery를 이용해서 쉽게 검색할 수 있는 라이브러리를 찾았다.

Demo & Download

위 링크를 이용하여 데모 실행과 다운로드 모두 할 수 있다.

다운로드 받은 뒤, 탐색기를 이용하여 해당 디렉토리로 이동한다.

그리고 본인의 Express.js 프로젝트에 

/public/javascripts/ 에 html-table-search.js을 집어넣는다.

그 다음 layout.jade에서 

[layout.jade] 

doctype html

html

  head

    title= title

    link(rel='stylesheet', href='/stylesheets/style.css') 

    script(src='http://code.jquery.com/jquery-latest.min.js')

    script(src='/javascripts/html-table-search.js') 

  body

    block content

와 같이 선언한다. 이것은 HTML에서 head안에 <meta>와 <script> 태그를 사용하던 것과 동일하다.

참고로, layout.jade의 body 밑에 block content 대신 index.jade가 들어간다.

어쨋든, 그 다음 

[index.jade]에서

jade에서 자바스크립트를 사용하기 위해서는 script.라고 붙여주어야 한다.

그 밑에 Jquery문법을 써주면 input태그를 써주지 않아도 나온다.

물론 search-table은 table의 class명이다

(CSS에서 클래스는 점(.) 이고 id는 #이다)

즉, 

table.search-table
   thead
      tr ....

이 Table을 호출하는 것이다.

이렇게 되면 테이블 위에 INput Field가 생성된다.

이것의 디자인은 html-table-search.js에서 수정할 수 있다.

    border-top-left-radius: 10px;    // border 상단 왼쪽 모서리 부분을 둥글게 하겠다

    border-top-right-radius: 10px; //  border 상단 오른쪽 모서리 부분을 둥글게 하겠다.

반드시 테이블에만 적용되는 것은 아니다.  <div>태그도 CSS로 적용이 가능하다.

.css파일에서 다음과 같이 설정하고,

#example {

    border: 2px solid red;

    padding: 10px;

    border-top-left-radius: 25px;

}

.html 파일에서

<div id="example1">

<h1>큰제목<h1>

</div>

이렇게하게 되면, 상단에 왼쪽 부분이 둥글게 적용된 것을 볼 수 있다.