๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

STUDY/JAVA

JSP-JQuery ์„ ํƒ์ž

๋ฐ˜์‘ํ˜•

1. jquery๋ฅผ ์ด์šฉํ•ด์„œ <body>์•ˆ์˜ ์š”์†Œ css๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ

jquery๋กœ h2ํƒœ๊ทธ์˜ ์ƒ‰๊น” ๋ณ€๊ฒฝ

๋ชจ๋“  h2ํƒœ๊ทธ์˜ ์ƒ‰๊น”์ด blue๋กœ ๋ณ€๊ฒฝ๋จ

ํ•˜๋‚˜์”ฉ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด h2ํƒœ๊ทธ์— id๋‚˜ class๋ฅผ ๋ถ€์—ฌํ•œ๋’ค ์„ ํƒ์ž๋กœ jquery์—์„œ ์ง€์ •ํ•˜๋ฉด ๋จ

์„ ํƒ์ž : ํ™”๋ฉด์— ๋งŒ๋“ค์–ด์ ธ ์žˆ๋Š” ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•
   โ“ * : ์ „์ฒด 
   โ“‘ ํƒœ๊ทธ๋ช… : ํƒœ๊ทธ
   โ“’ # : ์•„์ด๋””
   โ““ . : ํด๋ž˜์Šค

 

2. jsp์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์€ jquery์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ธฐ

inputํƒœ๊ทธ์˜ value์†์„ฑ์„ jquery์—์„œ ์‚ฌ์šฉํ•˜๋ ค๋ฉด

์†์„ฑํƒ์ƒ‰ ์„ ํƒ์ž
ํƒœ๊ทธ[์†์„ฑ=๊ฐ’]
ํƒœ๊ทธ[์†์„ฑ^๊ฐ’] : ์‹œ์ž‘๊ฐ’
ํƒœ๊ทธ[์†์„ฑ$๊ฐ’] : ๋๊ฐ’

3. tableํƒœ๊ทธ jaquery์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

body ์•ˆ์— ํ‘œ๋ฅผ ๋งŒ๋“ค์–ด ์ค€๋’ค, trํƒœ๊ทธ์— "t1"์ด๋ผ๋Š” id๋ฅผ ์„ค์ •ํ•ด์ค€๋‹ค.

3-1. ํ…Œ์ด๋ธ”์˜ ๋ฐฐ๊ฒฝ์ƒ‰ ๋ณ€๊ฒฝํ•˜๊ธฐ

   ๊ธ€์ž์ƒ‰ ๋ฐ”๊พธ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Œ color์—์„œ background๋กœ ๋ณ€๊ฒฝ

   ์ƒ‰์€ rgb์ƒ‰์ƒํ‘œ์—์„œ ์‚ฌ์šฉ

/

์œ„์น˜ํƒ์ƒ‰ ์„ ํƒ์ž
  first(์ฒ˜์Œ) / last(๋)
  odd(ํ™€์ˆ˜) / even(์ง์ˆ˜)

* t1์˜ ๋ฐฐ๊ฒฝ์ƒ‰ orange๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ

  - t1์€ id์ด๋ฏ€๋กœ #์„ ํƒ์ž ์‚ฌ์šฉ

  - t1์€ ์ฒซ๋ฒˆ์งธ tr์ด๋ฏ€๋กœ first์œ„์น˜ํƒ์ƒ‰ ์„ ํƒ์ž๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅ

* ํ…Œ์ด๋ธ”์˜ ํ™€์ˆ˜ํ–‰์˜ ์ƒ‰์€ gray, ์ง์ˆ˜ํ–‰์˜ ์ƒ‰์€ aqua

 

๋ฐ˜์‘ํ˜•