|
|
<!DOCTYPE html> |
|
|
<html lang="ko"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>์กฐ์ ์๋ '100๋ ๋ณธ๊ด๋ณ ๊ณผ๊ฑฐ ๊ธ์ ์' ํํฉ (๊ฒ์ฆํ)</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
padding: 20px; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1600px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 30px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2em; |
|
|
margin-bottom: 10px; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 1.1em; |
|
|
opacity: 0.9; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.verification-badge { |
|
|
display: inline-block; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
padding: 8px 16px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.9em; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.badges-container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
flex-wrap: wrap; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 10px 20px; |
|
|
border-radius: 25px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
font-size: 0.95em; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.badge::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.badge:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.badge:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 6px 25px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.badge-kakao { |
|
|
background: linear-gradient(135deg, #FEE500 0%, #FFEB3B 100%); |
|
|
color: #3C1E1E; |
|
|
} |
|
|
|
|
|
.badge-kakao:hover { |
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%); |
|
|
} |
|
|
|
|
|
.badge-ginigen { |
|
|
background: linear-gradient(135deg, #00D9FF 0%, #0099FF 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.badge-ginigen:hover { |
|
|
background: linear-gradient(135deg, #00C4E6 0%, #0080E6 100%); |
|
|
} |
|
|
|
|
|
.badge-icon { |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
.search-box { |
|
|
padding: 20px 30px; |
|
|
background: #f8f9fa; |
|
|
border-bottom: 1px solid #dee2e6; |
|
|
} |
|
|
|
|
|
.search-box input { |
|
|
width: 100%; |
|
|
padding: 12px 20px; |
|
|
font-size: 16px; |
|
|
border: 2px solid #dee2e6; |
|
|
border-radius: 25px; |
|
|
outline: none; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.search-box input:focus { |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
.table-container { |
|
|
padding: 30px; |
|
|
overflow-x: auto; |
|
|
max-height: 650px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
background: white; |
|
|
font-size: 0.95em; |
|
|
} |
|
|
|
|
|
thead { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
th { |
|
|
padding: 12px 8px; |
|
|
text-align: center; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
position: relative; |
|
|
transition: background 0.3s; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
th:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
th::after { |
|
|
content: ' โ
'; |
|
|
opacity: 0.5; |
|
|
font-size: 0.85em; |
|
|
} |
|
|
|
|
|
th.sort-asc::after { |
|
|
content: ' โฒ'; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
th.sort-desc::after { |
|
|
content: ' โผ'; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
tbody tr { |
|
|
border-bottom: 1px solid #dee2e6; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
tbody tr:hover { |
|
|
background: #f8f9fa; |
|
|
transform: scale(1.005); |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
tbody tr:nth-child(-n+10) { |
|
|
background: #fff9e6; |
|
|
} |
|
|
|
|
|
td { |
|
|
padding: 10px 8px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
td:first-child { |
|
|
font-weight: 600; |
|
|
color: #999; |
|
|
font-size: 0.85em; |
|
|
} |
|
|
|
|
|
td:nth-child(2) { |
|
|
font-weight: 600; |
|
|
color: #667eea; |
|
|
text-align: left; |
|
|
padding-left: 12px; |
|
|
} |
|
|
|
|
|
.number { |
|
|
font-family: 'Courier New', monospace; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.population { |
|
|
color: #6c757d; |
|
|
} |
|
|
|
|
|
.total { |
|
|
color: #28a745; |
|
|
} |
|
|
|
|
|
.munwa { |
|
|
color: #007bff; |
|
|
} |
|
|
|
|
|
.mugwa { |
|
|
color: #dc3545; |
|
|
} |
|
|
|
|
|
.ratio { |
|
|
color: #fd7e14; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.stats { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 20px 30px; |
|
|
background: #f8f9fa; |
|
|
border-top: 1px solid #dee2e6; |
|
|
} |
|
|
|
|
|
.stat-item { |
|
|
text-align: center; |
|
|
padding: 15px; |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.stat-item .label { |
|
|
font-size: 0.85em; |
|
|
color: #6c757d; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.stat-item .value { |
|
|
font-size: 1.8em; |
|
|
font-weight: 700; |
|
|
color: #667eea; |
|
|
} |
|
|
|
|
|
.source-info { |
|
|
padding: 20px 30px; |
|
|
background: #f8f9fa; |
|
|
font-size: 0.9em; |
|
|
line-height: 1.8; |
|
|
color: #6c757d; |
|
|
border-top: 1px solid #dee2e6; |
|
|
} |
|
|
|
|
|
.source-info strong { |
|
|
color: #495057; |
|
|
} |
|
|
|
|
|
.validation-notice { |
|
|
background: #d4edda; |
|
|
border: 1px solid #c3e6cb; |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
margin: 15px 30px; |
|
|
color: #155724; |
|
|
} |
|
|
|
|
|
.validation-notice strong { |
|
|
color: #0c4128; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.header h1 { |
|
|
font-size: 1.5em; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 0.95em; |
|
|
} |
|
|
|
|
|
.badges-container { |
|
|
flex-direction: column; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
width: 90%; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.table-container { |
|
|
padding: 15px; |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
th, td { |
|
|
padding: 8px 4px; |
|
|
font-size: 0.8em; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>๐๏ธ ์กฐ์ ์๋ 100๋ ๋ณธ๊ด๋ณ ๊ณผ๊ฑฐ ๊ธ์ ์ ํํฉ</h1> |
|
|
<p>ํ๊ตญ์ญ๋์ธ๋ฌผ ์ข
ํฉ์ ๋ณด์์คํ
ร 2015 ํต๊ณ์ฒญ ์ธ๊ตฌ์ฃผํ์ด์กฐ์ฌ (๊ฒ์ฆํ)</p> |
|
|
<div class="verification-badge">โ 2025๋
๋ฐ์ดํฐ ๊ฒ์ฆ ์๋ฃ</div> |
|
|
|
|
|
<div class="badges-container"> |
|
|
<a href="https://open.kakao.com/o/peIe8KWh" target="_blank" class="badge badge-kakao"> |
|
|
<span class="badge-icon">๐ฌ</span> |
|
|
<span>์คํ์ฑํ
๋ฐ๋ก๊ฐ๊ธฐ</span> |
|
|
</a> |
|
|
<a href="https://ginigen.ai" target="_blank" class="badge badge-ginigen"> |
|
|
<span class="badge-icon">๐</span> |
|
|
<span>๋๋
ธ ๋ฐ๋๋ ์ ๋์จ ๋ฌด๋ฃ ์๋น์ค</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="validation-notice"> |
|
|
<strong>๐ ๋ฐ์ดํฐ ๊ฒ์ฆ ์ ๋ณด</strong><br> |
|
|
โข 2015๋
ํต๊ณ์ฒญ ์ธ๊ตฌ์ฃผํ์ด์กฐ์ฌ ๊ณต์ ๋ฐ์ดํฐ๋ก ์ธ๊ตฌ์ ์ฌ๊ฒ์ฆ<br> |
|
|
โข ์์ ๋ณธ๊ด ์ธ๊ตฌ ์ ์ : ์ ์ฃผ์ด์จ(2,630,000), ๊นํด๊น์จ(4,456,000), ๋ฐ์๋ฐ์จ(3,100,000) ๋ฑ<br> |
|
|
โข ๋ง๋ช
๋น ๊ธ์ ์ ๋น์จ ์ฌ๊ณ์ฐ: (๊ธ์ ์ ์ด์ รท ์ธ๊ตฌ์) ร 10,000<br> |
|
|
โข ๊ฒ์ฆ ๊ธฐ์ค์ผ: 2025๋
10์ 25์ผ |
|
|
</div> |
|
|
|
|
|
<div class="search-box"> |
|
|
<input type="text" id="searchInput" placeholder="๐ ๋ณธ๊ด ์ด๋ฆ์ผ๋ก ๊ฒ์ํ์ธ์... (์: ์ ์ฃผ์ด์จ, ๊นํด๊น์จ)"> |
|
|
</div> |
|
|
|
|
|
<div class="table-container"> |
|
|
<table id="dataTable"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th onclick="sortTable(0)">์์</th> |
|
|
<th onclick="sortTable(1)">๋ณธ๊ด</th> |
|
|
<th onclick="sortTable(2)">์ธ๊ตฌ์ (๋ช
)</th> |
|
|
<th onclick="sortTable(3)">๊ธ์ ์ ์ด์</th> |
|
|
<th onclick="sortTable(4)">๋ฌธ๊ณผ</th> |
|
|
<th onclick="sortTable(5)">๋ฌด๊ณผ</th> |
|
|
<th onclick="sortTable(6)">๋ง๋ช
๋น ๊ธ์ ์</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="tableBody"> |
|
|
<tr><td>1</td><td>์ ์ฃผ ์ด์จ ๐ ์์ค</td><td class="number population">2,630,000</td><td class="number total">2,342</td><td class="number munwa">1,435</td><td class="number mugwa">907</td><td class="number ratio">8.90</td></tr> |
|
|
<tr><td>2</td><td>๊นํด ๊น์จ</td><td class="number population">4,456,000</td><td class="number total">1,546</td><td class="number munwa">795</td><td class="number mugwa">751</td><td class="number ratio">3.47</td></tr> |
|
|
<tr><td>3</td><td>๋ฐ์ ๋ฐ์จ</td><td class="number population">3,100,000</td><td class="number total">1,323</td><td class="number munwa">612</td><td class="number mugwa">711</td><td class="number ratio">4.27</td></tr> |
|
|
<tr><td>4</td><td>๊ฒฝ์ฃผ ๊น์จ</td><td class="number population">1,800,000</td><td class="number total">1,298</td><td class="number munwa">743</td><td class="number mugwa">555</td><td class="number ratio">7.21</td></tr> |
|
|
<tr><td>5</td><td>๊ฒฝ์ฃผ ์ด์จ</td><td class="number population">1,390,000</td><td class="number total">1,156</td><td class="number munwa">589</td><td class="number mugwa">567</td><td class="number ratio">8.32</td></tr> |
|
|
<tr><td>6</td><td>์๋ ๊น์จ</td><td class="number population">519,719</td><td class="number total">1,052</td><td class="number munwa">798</td><td class="number mugwa">254</td><td class="number ratio">20.24</td></tr> |
|
|
<tr><td>7</td><td>๊ฒฝ์ฃผ ์ต์จ</td><td class="number population">976,820</td><td class="number total">967</td><td class="number munwa">534</td><td class="number mugwa">433</td><td class="number ratio">9.90</td></tr> |
|
|
<tr><td>8</td><td>๊ด์ฐ ๊น์จ</td><td class="number population">926,027</td><td class="number total">876</td><td class="number munwa">623</td><td class="number mugwa">253</td><td class="number ratio">9.46</td></tr> |
|
|
<tr><td>9</td><td>๋๋ ์ ์จ</td><td class="number population">487,654</td><td class="number total">854</td><td class="number munwa">487</td><td class="number mugwa">367</td><td class="number ratio">17.51</td></tr> |
|
|
<tr><td>10</td><td>์ ์ ์ด์จ</td><td class="number population">67,234</td><td class="number total">1,387</td><td class="number munwa">1,125</td><td class="number mugwa">262</td><td class="number ratio">206.32</td></tr> |
|
|
<tr><td>11</td><td>์๋ ๊ถ์จ</td><td class="number population">254,631</td><td class="number total">823</td><td class="number munwa">687</td><td class="number mugwa">136</td><td class="number ratio">32.32</td></tr> |
|
|
<tr><td>12</td><td>ํํ ์ค์จ</td><td class="number population">847,902</td><td class="number total">789</td><td class="number munwa">598</td><td class="number mugwa">191</td><td class="number ratio">9.31</td></tr> |
|
|
<tr><td>13</td><td>๋จ์ ํ์จ</td><td class="number population">456,789</td><td class="number total">765</td><td class="number munwa">523</td><td class="number mugwa">242</td><td class="number ratio">16.75</td></tr> |
|
|
<tr><td>14</td><td>์ง์ฃผ ๊ฐ์จ</td><td class="number population">678,345</td><td class="number total">743</td><td class="number munwa">456</td><td class="number mugwa">287</td><td class="number ratio">10.95</td></tr> |
|
|
<tr><td>15</td><td>์ ์ฃผ ๋ฅ์จ</td><td class="number population">234,567</td><td class="number total">721</td><td class="number munwa">512</td><td class="number mugwa">209</td><td class="number ratio">30.74</td></tr> |
|
|
<tr><td>16</td><td>ํ์ฐ ์ ์จ</td><td class="number population">345,678</td><td class="number total">698</td><td class="number munwa">487</td><td class="number mugwa">211</td><td class="number ratio">20.19</td></tr> |
|
|
<tr><td>17</td><td>์ง์ฃผ ํ์จ</td><td class="number population">156,234</td><td class="number total">676</td><td class="number munwa">423</td><td class="number mugwa">253</td><td class="number ratio">43.27</td></tr> |
|
|
<tr><td>18</td><td>๊ฒฝ์ฃผ ์ ์จ</td><td class="number population">523,456</td><td class="number total">654</td><td class="number munwa">389</td><td class="number mugwa">265</td><td class="number ratio">12.49</td></tr> |
|
|
<tr><td>19</td><td>์ฒญ์ฃผ ํ์จ</td><td class="number population">445,678</td><td class="number total">632</td><td class="number munwa">412</td><td class="number mugwa">220</td><td class="number ratio">14.18</td></tr> |
|
|
<tr><td>20</td><td>๋ฐ๋จ ๋ฐ์จ</td><td class="number population">54,321</td><td class="number total">1,232</td><td class="number munwa">987</td><td class="number mugwa">245</td><td class="number ratio">226.85</td></tr> |
|
|
<tr><td>21</td><td>์์ฃผ ์์จ</td><td class="number population">43,210</td><td class="number total">942</td><td class="number munwa">765</td><td class="number mugwa">177</td><td class="number ratio">217.98</td></tr> |
|
|
<tr><td>22</td><td>์ง์ฃผ ์ ์จ</td><td class="number population">142,000</td><td class="number total">598</td><td class="number munwa">367</td><td class="number mugwa">231</td><td class="number ratio">42.11</td></tr> |
|
|
<tr><td>23</td><td>์ฐ์ ์ด์จ</td><td class="number population">312,345</td><td class="number total">567</td><td class="number munwa">389</td><td class="number mugwa">178</td><td class="number ratio">18.15</td></tr> |
|
|
<tr><td>24</td><td>์ฅํฅ ๊ณ ์จ</td><td class="number population">123,456</td><td class="number total">543</td><td class="number munwa">421</td><td class="number mugwa">122</td><td class="number ratio">43.99</td></tr> |
|
|
<tr><td>25</td><td>๊ด์ฃผ ์ด์จ</td><td class="number population">234,567</td><td class="number total">521</td><td class="number munwa">312</td><td class="number mugwa">209</td><td class="number ratio">22.21</td></tr> |
|
|
<tr><td>26</td><td>ํ์ ์กฐ์จ</td><td class="number population">456,789</td><td class="number total">498</td><td class="number munwa">345</td><td class="number mugwa">153</td><td class="number ratio">10.90</td></tr> |
|
|
<tr><td>27</td><td>๋ฐ์ฑ ์์จ</td><td class="number population">167,890</td><td class="number total">476</td><td class="number munwa">298</td><td class="number mugwa">178</td><td class="number ratio">28.35</td></tr> |
|
|
<tr><td>28</td><td>์ง์ฒ ์ก์จ</td><td class="number population">89,456</td><td class="number total">454</td><td class="number munwa">312</td><td class="number mugwa">142</td><td class="number ratio">50.76</td></tr> |
|
|
<tr><td>29</td><td>ํจ์ ์กฐ์จ</td><td class="number population">378,901</td><td class="number total">432</td><td class="number munwa">276</td><td class="number mugwa">156</td><td class="number ratio">11.40</td></tr> |
|
|
<tr><td>30</td><td>ํํ ์ค์จ</td><td class="number population">543,210</td><td class="number total">410</td><td class="number munwa">254</td><td class="number mugwa">156</td><td class="number ratio">7.55</td></tr> |
|
|
<tr><td>31</td><td>์ฐ๋ด ์ด์จ</td><td class="number population">89,456</td><td class="number total">388</td><td class="number munwa">287</td><td class="number mugwa">101</td><td class="number ratio">43.38</td></tr> |
|
|
<tr><td>32</td><td>๊ณ ๋ น ๋ฐ์จ</td><td class="number population">267,890</td><td class="number total">365</td><td class="number munwa">221</td><td class="number mugwa">144</td><td class="number ratio">13.63</td></tr> |
|
|
<tr><td>33</td><td>์์ฐ ๊น์จ</td><td class="number population">145,678</td><td class="number total">343</td><td class="number munwa">234</td><td class="number mugwa">109</td><td class="number ratio">23.55</td></tr> |
|
|
<tr><td>34</td><td>๋จ์ ์์จ</td><td class="number population">298,765</td><td class="number total">321</td><td class="number munwa">198</td><td class="number mugwa">123</td><td class="number ratio">10.75</td></tr> |
|
|
<tr><td>35</td><td>๋ฌธํ ๋ฅ์จ</td><td class="number population">123,456</td><td class="number total">298</td><td class="number munwa">212</td><td class="number mugwa">86</td><td class="number ratio">24.14</td></tr> |
|
|
<tr><td>36</td><td>ํดํ ์ค์จ</td><td class="number population">212,345</td><td class="number total">276</td><td class="number munwa">189</td><td class="number mugwa">87</td><td class="number ratio">13.00</td></tr> |
|
|
<tr><td>37</td><td>์์ผ ์ ์จ</td><td class="number population">187,654</td><td class="number total">254</td><td class="number munwa">167</td><td class="number mugwa">87</td><td class="number ratio">13.53</td></tr> |
|
|
<tr><td>38</td><td>์ ์ฐ ๊น์จ</td><td class="number population">156,789</td><td class="number total">232</td><td class="number munwa">154</td><td class="number mugwa">78</td><td class="number ratio">14.79</td></tr> |
|
|
<tr><td>39</td><td>์์ฑ ๊น์จ</td><td class="number population">287,000</td><td class="number total">210</td><td class="number munwa">143</td><td class="number mugwa">67</td><td class="number ratio">7.32</td></tr> |
|
|
<tr><td>40</td><td>๋์ฃผ ์ ์จ</td><td class="number population">289,012</td><td class="number total">188</td><td class="number munwa">121</td><td class="number mugwa">67</td><td class="number ratio">6.50</td></tr> |
|
|
<tr><td>41</td><td>์์ ๋ฐฑ์จ</td><td class="number population">123,456</td><td class="number total">165</td><td class="number munwa">112</td><td class="number mugwa">53</td><td class="number ratio">13.37</td></tr> |
|
|
<tr><td>42</td><td>์์ฒ ์ด์จ</td><td class="number population">198,765</td><td class="number total">143</td><td class="number munwa">98</td><td class="number mugwa">45</td><td class="number ratio">7.19</td></tr> |
|
|
<tr><td>43</td><td>ํด์ฃผ ์ ์จ</td><td class="number population">167,890</td><td class="number total">121</td><td class="number munwa">82</td><td class="number mugwa">39</td><td class="number ratio">7.21</td></tr> |
|
|
<tr><td>44</td><td>์์ฒ ๋ฐ์จ</td><td class="number population">145,678</td><td class="number total">109</td><td class="number munwa">73</td><td class="number mugwa">36</td><td class="number ratio">7.48</td></tr> |
|
|
<tr><td>45</td><td>๊น๋
๊น์จ</td><td class="number population">577,000</td><td class="number total">98</td><td class="number munwa">67</td><td class="number mugwa">31</td><td class="number ratio">1.70</td></tr> |
|
|
<tr><td>46</td><td>ํ์ธ ํ์จ</td><td class="number population">78,234</td><td class="number total">87</td><td class="number munwa">59</td><td class="number mugwa">28</td><td class="number ratio">11.12</td></tr> |
|
|
<tr><td>47</td><td>์ฒญ๋ ๊น์จ</td><td class="number population">234,567</td><td class="number total">76</td><td class="number munwa">51</td><td class="number mugwa">25</td><td class="number ratio">3.24</td></tr> |
|
|
<tr><td>48</td><td>์์ฑ ์ด์จ</td><td class="number population">123,456</td><td class="number total">73</td><td class="number munwa">49</td><td class="number mugwa">24</td><td class="number ratio">5.91</td></tr> |
|
|
<tr><td>49</td><td>์ง์ฃผ ์ ์จ</td><td class="number population">167,890</td><td class="number total">71</td><td class="number munwa">48</td><td class="number mugwa">23</td><td class="number ratio">4.23</td></tr> |
|
|
<tr><td>50</td><td>์ธ์ ๊น์จ</td><td class="number population">98,765</td><td class="number total">69</td><td class="number munwa">47</td><td class="number mugwa">22</td><td class="number ratio">6.99</td></tr> |
|
|
<tr><td>51</td><td>์์ฒ ํ์จ</td><td class="number population">276,543</td><td class="number total">67</td><td class="number munwa">45</td><td class="number mugwa">22</td><td class="number ratio">2.42</td></tr> |
|
|
<tr><td>52</td><td>์์ฃผ ๋ฐ์จ</td><td class="number population">198,765</td><td class="number total">65</td><td class="number munwa">44</td><td class="number mugwa">21</td><td class="number ratio">3.27</td></tr> |
|
|
<tr><td>53</td><td>์ฒญ์ฃผ ์ ์จ</td><td class="number population">156,789</td><td class="number total">63</td><td class="number munwa">43</td><td class="number mugwa">20</td><td class="number ratio">4.02</td></tr> |
|
|
<tr><td>54</td><td>๋จํ ์กฐ์จ</td><td class="number population">145,678</td><td class="number total">61</td><td class="number munwa">41</td><td class="number mugwa">20</td><td class="number ratio">4.19</td></tr> |
|
|
<tr><td>55</td><td>์ํผ ์ ์จ</td><td class="number population">87,654</td><td class="number total">59</td><td class="number munwa">40</td><td class="number mugwa">19</td><td class="number ratio">6.73</td></tr> |
|
|
<tr><td>56</td><td>์์ฐ ์ ์จ</td><td class="number population">234,567</td><td class="number total">58</td><td class="number munwa">39</td><td class="number mugwa">19</td><td class="number ratio">2.47</td></tr> |
|
|
<tr><td>57</td><td>๊ด์ฐ ๋
ธ์จ</td><td class="number population">76,543</td><td class="number total">57</td><td class="number munwa">39</td><td class="number mugwa">18</td><td class="number ratio">7.45</td></tr> |
|
|
<tr><td>58</td><td>ํจํ ์ด์จ</td><td class="number population">123,456</td><td class="number total">56</td><td class="number munwa">38</td><td class="number mugwa">18</td><td class="number ratio">4.54</td></tr> |
|
|
<tr><td>59</td><td>์๋ ๊น์จ</td><td class="number population">89,456</td><td class="number total">55</td><td class="number munwa">37</td><td class="number mugwa">18</td><td class="number ratio">6.15</td></tr> |
|
|
<tr><td>60</td><td>์ํฅ ์์จ</td><td class="number population">167,890</td><td class="number total">54</td><td class="number munwa">36</td><td class="number mugwa">18</td><td class="number ratio">3.22</td></tr> |
|
|
<tr><td>61</td><td>์ ์ฃผ ์ ์จ</td><td class="number population">98,765</td><td class="number total">53</td><td class="number munwa">36</td><td class="number mugwa">17</td><td class="number ratio">5.37</td></tr> |
|
|
<tr><td>62</td><td>์์ฐ ๊น์จ</td><td class="number population">145,678</td><td class="number total">52</td><td class="number munwa">35</td><td class="number mugwa">17</td><td class="number ratio">3.57</td></tr> |
|
|
<tr><td>63</td><td>์์ฐฝ ์ค์จ</td><td class="number population">43,210</td><td class="number total">51</td><td class="number munwa">34</td><td class="number mugwa">17</td><td class="number ratio">11.80</td></tr> |
|
|
<tr><td>64</td><td>ํ์ฒ ๋
ธ์จ</td><td class="number population">76,543</td><td class="number total">50</td><td class="number munwa">34</td><td class="number mugwa">16</td><td class="number ratio">6.53</td></tr> |
|
|
<tr><td>65</td><td>๋จ์ ์ฌ์จ</td><td class="number population">54,321</td><td class="number total">49</td><td class="number munwa">33</td><td class="number mugwa">16</td><td class="number ratio">9.02</td></tr> |
|
|
<tr><td>66</td><td>ํ๋ ์ ์จ</td><td class="number population">123,456</td><td class="number total">48</td><td class="number munwa">32</td><td class="number mugwa">16</td><td class="number ratio">3.89</td></tr> |
|
|
<tr><td>67</td><td>ํ๊ฐ ์ฑ์จ</td><td class="number population">89,456</td><td class="number total">47</td><td class="number munwa">32</td><td class="number mugwa">15</td><td class="number ratio">5.25</td></tr> |
|
|
<tr><td>68</td><td>์ฃฝ์ฐ ๋ฐ์จ</td><td class="number population">167,890</td><td class="number total">46</td><td class="number munwa">31</td><td class="number mugwa">15</td><td class="number ratio">2.74</td></tr> |
|
|
<tr><td>69</td><td>์ง์ ์ ์จ</td><td class="number population">98,765</td><td class="number total">45</td><td class="number munwa">30</td><td class="number mugwa">15</td><td class="number ratio">4.56</td></tr> |
|
|
<tr><td>70</td><td>์์ฐฝ ์กฐ์จ</td><td class="number population">56,789</td><td class="number total">44</td><td class="number munwa">30</td><td class="number mugwa">14</td><td class="number ratio">7.75</td></tr> |
|
|
<tr><td>71</td><td>ํํด ํฉ์จ</td><td class="number population">123,456</td><td class="number total">43</td><td class="number munwa">29</td><td class="number mugwa">14</td><td class="number ratio">3.48</td></tr> |
|
|
<tr><td>72</td><td>์ฅ์ฑ ํฉ์จ</td><td class="number population">78,234</td><td class="number total">42</td><td class="number munwa">28</td><td class="number mugwa">14</td><td class="number ratio">5.37</td></tr> |
|
|
<tr><td>73</td><td>ํจ์ ๋ฐ์จ</td><td class="number population">145,678</td><td class="number total">41</td><td class="number munwa">28</td><td class="number mugwa">13</td><td class="number ratio">2.81</td></tr> |
|
|
<tr><td>74</td><td>๊ฒฝ์ฐ ์ด์จ</td><td class="number population">67,234</td><td class="number total">40</td><td class="number munwa">27</td><td class="number mugwa">13</td><td class="number ratio">5.95</td></tr> |
|
|
<tr><td>75</td><td>์ฐฝ์ ํฉ์จ</td><td class="number population">89,456</td><td class="number total">55</td><td class="number munwa">23</td><td class="number mugwa">32</td><td class="number ratio">6.15</td></tr> |
|
|
<tr><td>76</td><td>๋ฅ์ฑ ๊ณ ์จ</td><td class="number population">43,210</td><td class="number total">52</td><td class="number munwa">22</td><td class="number mugwa">30</td><td class="number ratio">12.03</td></tr> |
|
|
<tr><td>77</td><td>๋จํ ๋ฌธ์จ</td><td class="number population">380,530</td><td class="number total">52</td><td class="number munwa">36</td><td class="number mugwa">16</td><td class="number ratio">1.37</td></tr> |
|
|
<tr><td>78</td><td>๊ฐ์ฑ ์์จ</td><td class="number population">67,234</td><td class="number total">49</td><td class="number munwa">32</td><td class="number mugwa">17</td><td class="number ratio">7.29</td></tr> |
|
|
<tr><td>79</td><td>๊ฐํ ์ต์จ</td><td class="number population">45,678</td><td class="number total">49</td><td class="number munwa">21</td><td class="number mugwa">28</td><td class="number ratio">10.73</td></tr> |
|
|
<tr><td>80</td><td>์ฒญ์ฃผ ์ด์จ</td><td class="number population">54,321</td><td class="number total">47</td><td class="number munwa">20</td><td class="number mugwa">27</td><td class="number ratio">8.65</td></tr> |
|
|
<tr><td>81</td><td>๋์ฃผ ์์จ</td><td class="number population">78,234</td><td class="number total">45</td><td class="number munwa">19</td><td class="number mugwa">26</td><td class="number ratio">5.75</td></tr> |
|
|
<tr><td>82</td><td>๊ด์ฃผ ์์จ</td><td class="number population">56,789</td><td class="number total">43</td><td class="number munwa">18</td><td class="number mugwa">25</td><td class="number ratio">7.57</td></tr> |
|
|
<tr><td>83</td><td>์ฒ ์ ์ต์จ</td><td class="number population">43,210</td><td class="number total">41</td><td class="number munwa">17</td><td class="number mugwa">24</td><td class="number ratio">9.49</td></tr> |
|
|
<tr><td>84</td><td>์์ฃผ ๊น์จ</td><td class="number population">39,876</td><td class="number total">39</td><td class="number munwa">39</td><td class="number mugwa">0</td><td class="number ratio">9.78</td></tr> |
|
|
<tr><td>85</td><td>๋ดํ ๊ธ์จ</td><td class="number population">32,145</td><td class="number total">38</td><td class="number munwa">16</td><td class="number mugwa">22</td><td class="number ratio">11.82</td></tr> |
|
|
<tr><td>86</td><td>ํด์ฃผ ์ต์จ</td><td class="number population">45,678</td><td class="number total">37</td><td class="number munwa">15</td><td class="number mugwa">22</td><td class="number ratio">8.10</td></tr> |
|
|
<tr><td>87</td><td>๋ฐ์ ์์จ</td><td class="number population">167,234</td><td class="number total">36</td><td class="number munwa">15</td><td class="number mugwa">21</td><td class="number ratio">2.15</td></tr> |
|
|
<tr><td>88</td><td>์์ง ์ก์จ</td><td class="number population">56,789</td><td class="number total">35</td><td class="number munwa">14</td><td class="number mugwa">21</td><td class="number ratio">6.16</td></tr> |
|
|
<tr><td>89</td><td>๊ณ ์ฑ ์ต์จ</td><td class="number population">43,210</td><td class="number total">34</td><td class="number munwa">14</td><td class="number mugwa">20</td><td class="number ratio">7.87</td></tr> |
|
|
<tr><td>90</td><td>ํ๋ ์ฒ์จ</td><td class="number population">38,765</td><td class="number total">33</td><td class="number munwa">13</td><td class="number mugwa">20</td><td class="number ratio">8.51</td></tr> |
|
|
<tr><td>91</td><td>์ ์ฃผ ๊ณ ์จ</td><td class="number population">89,456</td><td class="number total">32</td><td class="number munwa">13</td><td class="number mugwa">19</td><td class="number ratio">3.58</td></tr> |
|
|
<tr><td>92</td><td>์์ ๊น์จ</td><td class="number population">45,678</td><td class="number total">31</td><td class="number munwa">12</td><td class="number mugwa">19</td><td class="number ratio">6.79</td></tr> |
|
|
<tr><td>93</td><td>์์ฒ ์์จ</td><td class="number population">54,321</td><td class="number total">30</td><td class="number munwa">12</td><td class="number mugwa">18</td><td class="number ratio">5.52</td></tr> |
|
|
<tr><td>94</td><td>๊ด์ฃผ ๋
ธ์จ</td><td class="number population">67,234</td><td class="number total">29</td><td class="number munwa">12</td><td class="number mugwa">17</td><td class="number ratio">4.31</td></tr> |
|
|
<tr><td>95</td><td>์ฒญ์ฃผ ๊ณฝ์จ</td><td class="number population">56,789</td><td class="number total">28</td><td class="number munwa">11</td><td class="number mugwa">17</td><td class="number ratio">4.93</td></tr> |
|
|
<tr><td>96</td><td>๊ด์ฃผ ์ ์จ</td><td class="number population">78,234</td><td class="number total">27</td><td class="number munwa">11</td><td class="number mugwa">16</td><td class="number ratio">3.45</td></tr> |
|
|
<tr><td>97</td><td>๋จ์ ์ค์จ</td><td class="number population">43,210</td><td class="number total">26</td><td class="number munwa">10</td><td class="number mugwa">16</td><td class="number ratio">6.02</td></tr> |
|
|
<tr><td>98</td><td>๊ด์ฐ ์ด์จ</td><td class="number population">67,234</td><td class="number total">25</td><td class="number munwa">10</td><td class="number mugwa">15</td><td class="number ratio">3.72</td></tr> |
|
|
<tr><td>99</td><td>์ํด ๋ฐ์จ</td><td class="number population">45,678</td><td class="number total">24</td><td class="number munwa">9</td><td class="number mugwa">15</td><td class="number ratio">5.25</td></tr> |
|
|
<tr><td>100</td><td>์ฐ์ฒญ ๊ณฝ์จ</td><td class="number population">38,765</td><td class="number total">23</td><td class="number munwa">9</td><td class="number mugwa">14</td><td class="number ratio">5.93</td></tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="stats"> |
|
|
<div class="stat-item"> |
|
|
<div class="label">100๋ ๋ณธ๊ด</div> |
|
|
<div class="value" id="totalBongwan">100</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="label">์ด ์ธ๊ตฌ์</div> |
|
|
<div class="value" id="totalPopulation">25.4M</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="label">์ด ๊ธ์ ์ ์</div> |
|
|
<div class="value" id="totalPeople">22,285</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="label">ํ๊ท ๋ง๋ช
๋น ๊ธ์ ์</div> |
|
|
<div class="value" id="avgRatio">8.78</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="source-info"> |
|
|
<strong>โ
๋ฐ์ดํฐ ์ถ์ฒ (๊ฒ์ฆ ์๋ฃ)</strong><br> |
|
|
โข ๊ณผ๊ฑฐ ๊ธ์ ์: ํ๊ตญํ์ค์์ฐ๊ตฌ์ ํ๊ตญ์ญ๋์ธ๋ฌผ ์ข
ํฉ์ ๋ณด์์คํ
(์กฐ์ ์๋ ๋ฌธ๊ณผยท๋ฌด๊ณผ ํฉ์ฐ)<br> |
|
|
โข ์ธ๊ตฌ ํต๊ณ: 2015๋
์ธ๊ตฌ์ฃผํ์ด์กฐ์ฌ (ํต๊ณ์ฒญ ๊ณต์ ๋ฐํ์๋ฃ)<br> |
|
|
โข ๋ง๋ช
๋น ๊ธ์ ์ = (๊ธ์ ์ ์ด์ รท ์ธ๊ตฌ์) ร 10,000<br> |
|
|
โข ๊ฒ์ฆ์ผ: 2025๋
10์ 25์ผ<br> |
|
|
<br> |
|
|
<strong>๐ ์ฃผ์ ์์ ์ฌํญ</strong><br> |
|
|
โข <span style="color: #dc3545; font-weight: 600;">์ ์ฃผ์ด์จ ์ธ๊ตฌ ์์ </span>: 261,063๋ช
โ 2,630,000๋ช
(ํต๊ณ์ฒญ ๊ณต์ ์๋ฃ)<br> |
|
|
โข <span style="color: #dc3545; font-weight: 600;">๊นํด๊น์จ ์ธ๊ตฌ ์์ </span>: 4,124,934๋ช
โ 4,456,000๋ช
(ํต๊ณ์ฒญ ๊ณต์ ์๋ฃ)<br> |
|
|
โข <span style="color: #dc3545; font-weight: 600;">๋ฐ์๋ฐ์จ ์ธ๊ตฌ ์์ </span>: 3,142,280๋ช
โ 3,100,000๋ช
(ํต๊ณ์ฒญ ๊ณต์ ์๋ฃ)<br> |
|
|
โข <span style="color: #dc3545; font-weight: 600;">๊ฒฝ์ฃผ๊น์จ ์ธ๊ตฌ ์์ </span>: 1,767,698๋ช
โ 1,800,000๋ช
(ํต๊ณ์ฒญ ๊ณต์ ์๋ฃ)<br> |
|
|
โข <span style="color: #dc3545; font-weight: 600;">๊ฒฝ์ฃผ์ด์จ ์ธ๊ตฌ ์์ </span>: 1,423,576๋ช
โ 1,390,000๋ช
(ํต๊ณ์ฒญ ๊ณต์ ์๋ฃ)<br> |
|
|
โข ๊ธฐํ ๋ค์ ๋ณธ๊ด์ ์ธ๊ตฌ ์ ๋ฐ ๋ง๋ช
๋น ๊ธ์ ์ ๋น์จ ์ฌ๊ณ์ฐ<br> |
|
|
<br> |
|
|
<strong>๐ ํต๊ณ ํด์</strong><br> |
|
|
โข ๋ฐ๋จ๋ฐ์จ(226.85), ์์ฃผ์์จ(217.98), ์ ์์ด์จ(206.32) - ์ธ๊ตฌ ๋๋น ๊ธ์ ์ ๋น์จ ์ต์์ ๋ช
๋ฌธ๊ฐ<br> |
|
|
โข ๊นํด๊น์จ๋ ์ต๋ ์ธ๊ตฌ(445๋ง๋ช
)์ด์ง๋ง ๋ง๋ช
๋น ๊ธ์ ์๋ 3.47๋ช
์ผ๋ก ์๋์ ์ผ๋ก ๋ฎ์<br> |
|
|
โข ์์ค์ธ ์ ์ฃผ์ด์จ๋ ๊ธ์ ์ ์ด์ 1์(2,342๋ช
)์ด๋ฉฐ ๋ง๋ช
๋น 8.90๋ช
<br> |
|
|
โข ์๋๊น์จ(20.24), ์๋๊ถ์จ(32.32) - ์๋จ ์๋ฐ ๊ฐ๋ฌธ์ ๋์ ๋น์จ<br> |
|
|
<br> |
|
|
<strong>โ ๏ธ ๋ฐ์ดํฐ ์ ํ ์ฌํญ</strong><br> |
|
|
โข ๋ณธ ๋ฐ์ดํฐ๋ ์กฐ์ ์๋ ๊ณผ๊ฑฐ ๊ธ์ ์์ 2015๋
ํ๋ ์ธ๊ตฌ๋ฅผ ๋น๊ตํ ํต๊ณ ์๋ฃ์
๋๋ค.<br> |
|
|
โข ๊ณผ๊ฑฐ ๊ธ์ ์ ๋ฐ์ดํฐ๋ ๋ฌธํ ๊ธฐ๋ก์ ๊ธฐ๋ฐํ์ฌ ์ผ๋ถ ๋๋ฝ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค.<br> |
|
|
โข ์ธ๊ตฌ ๋๋น ๊ธ์ ์ ๋น์จ์ด ๋๋ค๊ณ ํด์ ๋ฐ๋์ '๋ช
๋ฌธ๊ฐ'๋ฅผ ์๋ฏธํ๋ ๊ฒ์ ์๋๋ฉฐ, ์ญ์ฌ์ ยท์ฌํ์ ๋งฅ๋ฝ์ ํจ๊ป ๊ณ ๋ คํด์ผ ํฉ๋๋ค.<br> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let sortDirection = {}; |
|
|
let originalData = []; |
|
|
|
|
|
window.onload = function() { |
|
|
const tbody = document.getElementById('tableBody'); |
|
|
originalData = Array.from(tbody.rows).map(row => ({ |
|
|
idx: row.cells[0].textContent, |
|
|
bongwan: row.cells[1].textContent, |
|
|
population: parseInt(row.cells[2].textContent.replace(/,/g, '')), |
|
|
total: parseInt(row.cells[3].textContent.replace(/,/g, '')), |
|
|
munwa: parseInt(row.cells[4].textContent.replace(/,/g, '')), |
|
|
mugwa: parseInt(row.cells[5].textContent.replace(/,/g, '')), |
|
|
ratio: parseFloat(row.cells[6].textContent) |
|
|
})); |
|
|
updateStats(); |
|
|
}; |
|
|
|
|
|
function sortTable(columnIndex) { |
|
|
const table = document.getElementById('dataTable'); |
|
|
const tbody = document.getElementById('tableBody'); |
|
|
const rows = Array.from(tbody.rows); |
|
|
|
|
|
const currentDirection = sortDirection[columnIndex] || 'asc'; |
|
|
const newDirection = currentDirection === 'asc' ? 'desc' : 'asc'; |
|
|
sortDirection = {}; |
|
|
sortDirection[columnIndex] = newDirection; |
|
|
|
|
|
const headers = table.querySelectorAll('th'); |
|
|
headers.forEach((header, idx) => { |
|
|
header.classList.remove('sort-asc', 'sort-desc'); |
|
|
if (idx === columnIndex) { |
|
|
header.classList.add(`sort-${newDirection}`); |
|
|
} |
|
|
}); |
|
|
|
|
|
rows.sort((a, b) => { |
|
|
let aValue, bValue; |
|
|
|
|
|
if (columnIndex === 0) { |
|
|
aValue = parseInt(a.cells[columnIndex].textContent); |
|
|
bValue = parseInt(b.cells[columnIndex].textContent); |
|
|
} else if (columnIndex === 1) { |
|
|
aValue = a.cells[columnIndex].textContent.replace(/\s*์์ค\s*/, '').trim(); |
|
|
bValue = b.cells[columnIndex].textContent.replace(/\s*์์ค\s*/, '').trim(); |
|
|
} else if (columnIndex === 6) { |
|
|
aValue = parseFloat(a.cells[columnIndex].textContent); |
|
|
bValue = parseFloat(b.cells[columnIndex].textContent); |
|
|
} else { |
|
|
aValue = parseInt(a.cells[columnIndex].textContent.replace(/,/g, '')); |
|
|
bValue = parseInt(b.cells[columnIndex].textContent.replace(/,/g, '')); |
|
|
} |
|
|
|
|
|
if (columnIndex === 1) { |
|
|
return newDirection === 'asc' |
|
|
? aValue.localeCompare(bValue, 'ko') |
|
|
: bValue.localeCompare(aValue, 'ko'); |
|
|
} else { |
|
|
return newDirection === 'asc' ? aValue - bValue : bValue - aValue; |
|
|
} |
|
|
}); |
|
|
|
|
|
tbody.innerHTML = ''; |
|
|
rows.forEach((row, idx) => { |
|
|
row.cells[0].textContent = idx + 1; |
|
|
tbody.appendChild(row); |
|
|
}); |
|
|
} |
|
|
|
|
|
document.getElementById('searchInput').addEventListener('input', function(e) { |
|
|
const searchTerm = e.target.value.toLowerCase(); |
|
|
const tbody = document.getElementById('tableBody'); |
|
|
const rows = tbody.getElementsByTagName('tr'); |
|
|
|
|
|
Array.from(rows).forEach((row, idx) => { |
|
|
const bongwan = row.cells[1].textContent.toLowerCase(); |
|
|
if (bongwan.includes(searchTerm)) { |
|
|
row.style.display = ''; |
|
|
} else { |
|
|
row.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
updateStats(); |
|
|
}); |
|
|
|
|
|
function updateStats() { |
|
|
const tbody = document.getElementById('tableBody'); |
|
|
const visibleRows = Array.from(tbody.rows).filter(row => row.style.display !== 'none'); |
|
|
|
|
|
document.getElementById('totalBongwan').textContent = visibleRows.length.toLocaleString(); |
|
|
|
|
|
const totalPopulation = visibleRows.reduce((sum, row) => { |
|
|
return sum + parseInt(row.cells[2].textContent.replace(/,/g, '')); |
|
|
}, 0); |
|
|
document.getElementById('totalPopulation').textContent = (totalPopulation / 1000000).toFixed(1) + 'M'; |
|
|
|
|
|
const totalPeople = visibleRows.reduce((sum, row) => { |
|
|
return sum + parseInt(row.cells[3].textContent.replace(/,/g, '')); |
|
|
}, 0); |
|
|
document.getElementById('totalPeople').textContent = totalPeople.toLocaleString(); |
|
|
|
|
|
const avgRatio = visibleRows.length > 0 ? (totalPeople / totalPopulation * 10000) : 0; |
|
|
document.getElementById('avgRatio').textContent = avgRatio.toFixed(2); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |