Please enable JavaScript in your browser to load website properly.

Click here if you'd like to learn how.

와고식 현황판 대충 이런느낌이면 좋겠음 [1]

중장 아무것도아니구나 | 25-07-20 11:31:36 | 조회 : 108 | 추천 : +1


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>YB 대학 선수 정렬 표</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 8px; border: 1px solid #ccc; text-align: center; }
    th { background-color: #f2f2f2; cursor: pointer; }
    .logo { text-align: center; margin-bottom: 20px; }
  </style>
</head>
<body>

  <div class="logo">
    <h2> YB 대학 선수 목록</h2>
    <p>※ 클릭하면 정렬됩니다 (티어 / 종족 / 입사순)</p>
  </div>

  <table id="ybTable">
    <thead>
      <tr>
        <th onclick="sortTable(0)">이름</th>
        <th onclick="sortTable(1)">티어</th>
        <th onclick="sortTable(2)">종족</th>
        <th onclick="sortTable(3)">입사순</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>이재호</td><td>GOD</td><td>T</td><td>1</td></tr>
      <tr><td>도재욱</td><td>GOD</td><td>P</td><td>0</td></tr>
      <tr><td>염보성</td><td>KING</td><td>T</td><td>0</td></tr>
      <tr><td>고도준</td><td>SPADE</td><td>P</td><td>0</td></tr>
      <tr><td>전제민</td><td>JOKER</td><td>P</td><td>0</td></tr>
      <tr><td>김병수</td><td>JACK</td><td>Z</td><td>0</td></tr>
      <tr><td>유승곤</td><td>JACK</td><td>T</td><td>0</td></tr>
      <tr><td>빵지니</td><td>8Tier</td><td>T</td><td>6</td></tr>
      <tr><td>먼진</td><td>8Tier</td><td>Z</td><td>5</td></tr>
      <tr><td>박하악</td><td>7Tier</td><td>Z</td><td>8</td></tr>
      <tr><td>주하랑</td><td>6Tier</td><td>P</td><td>7</td></tr>
      <tr><td>하랑e</td><td>6Tier</td><td>P</td><td>1</td></tr>
      <tr><td>태영</td><td>5Tier</td><td>T</td><td>7</td></tr>
      <tr><td>무찌</td><td>4Tier</td><td>T</td><td>3</td></tr>
      <tr><td>우리밍</td><td>4Tier</td><td>T</td><td>0</td></tr>
      <tr><td>지두두</td><td>3Tier</td><td>T</td><td>3</td></tr>
      <tr><td>저라뎃</td><td>2Tier</td><td>T</td><td>0</td></tr>
      <tr><td>아망뚜</td><td>BABY</td><td>Z</td><td>0</td></tr>
      <tr><td>지동원</td><td>UNKNOWN</td><td>T</td><td>0</td></tr>
    </tbody>
  </table>

  <script>
    function tierRank(tier) {
      const order = {
        "GOD": 0, "KING": 1, "SPADE": 2, "JOKER": 3, "JACK": 4,
        "8Tier": 5, "7Tier": 6, "6Tier": 7, "5Tier": 8,
        "4Tier": 9, "3Tier": 10, "2Tier": 11, "BABY": 12, "UNKNOWN": 13
      };
      return order[tier] ?? 99;
    }

    function raceRank(race) {
      return { "P": 0, "T": 1, "Z": 2 }[race] ?? 99;
    }

    function sortTable(n) {
      const table = document.getElementById("ybTable");
      const rows = Array.from(table.rows).slice(1);
      const tbody = table.tBodies[0];

      rows.sort((a, b) => {
        const x = a.cells[n].innerText;
        const y = b.cells[n].innerText;

        if (n === 1) return tierRank(x) - tierRank(y); // 티어
        if (n === 2) return raceRank(x) - raceRank(y); // 종족
        if (n === 3) return parseInt(x) - parseInt(y); // 입사순
        return x.localeCompare(y); // 이름
      });

      rows.forEach(row => tbody.appendChild(row));
    }
  </script>

</body>
</html>




위에 다 복사해서 메모장에 붙여넣기 한다음 
파일 - 다름이름으로 저장 - 파일이름뒤에 확장자 .html 로 하고 
파일형식을 텍스트 문서가 아니라 모든파일로 변경후에 저장하면 html 파일 나오거든? 그거 클릭해서 확인해봐

표위에 상단 이름 / 종족 / 티어/  입사  누르면 정렬 바뀜 

SNS로 공유하기
< 61 62 63 64 65 >