자바스크립트로 테이블을 작성하는 방법-프런트엔드 Q&A-php.cn

프런트 엔드 개발에서 테이블은 가장 일반적인 요소 중 하나입니다. JavaScript를 사용하면 테이블을 동적으로 생성할 수 있으므로 테이블 제어 및 작동이 쉬워집니다. 다음은 JavaScript 테이블을 더 잘 작성하는 데 도움이 되는 몇 가지 일반적인 방법과 기술입니다.

기본 테이블 생성 및 수정

테이블은 HTML 태그

, , , , ,

td> 정의합니다. 테이블을 동적으로 생성하려면 이러한 태그를 추가하여 테이블을 생성할 수 있습니다.

다음은 간단한 예입니다.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

로그인 후 복사

양식을 만든 후 수정할 수 있습니다. 예를 들어, 새 행과 열을 추가할 수 있습니다.

var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Bob";
cell2.innerHTML = "40";
cell3.innerHTML = "Chicago";

로그인 후 복사

위 코드는 테이블에 새 행을 추가하고 각 셀의 정보를 채웁니다.

데이터를 기반으로 테이블 생성

실제 개발에서는 일부 데이터를 기반으로 테이블을 동적으로 생성해야 할 수도 있습니다. 일부 학생 정보가 포함된 JSON 배열이 있다고 가정하면 배열을 순회하여 테이블을 동적으로 생성할 수 있습니다.

다음은 예입니다.

var students = [
  {name: "John", age: 25, city: "New York"},
  {name: "Jane", age: 30, city: "Los Angeles"},
  {name: "Bob", age: 40, city: "Chicago"}
];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
  var th = document.createElement("th");
  th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
  tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
  var tr = document.createElement("tr");
  for (var key in students[i]) {
    var td = document.createElement("td");
    td.innerHTML = students[i][key];
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);

로그인 후 복사

위 코드는 먼저 테이블을 포함하는 DOM 요소를 생성한 다음 테이블 헤더와 테이블 본문을 각각 생성합니다. JSON 배열을 순회하는 과정에서 테이블 헤더와 테이블 본문의 형식에 따라 요소가 행별로 추가됩니다.

코드에서 굵은 글씨 부분은 각 키의 첫 글자를 대문자로 사용했다는 점에 유의하세요.

테이블 정렬

테이블 정렬은 가장 일반적인 작업 중 하나입니다. 테이블 정렬은 JavaScript를 통해 수행할 수 있습니다.

다음은 예시입니다.

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

로그인 후 복사

위 코드는 테이블의 특정 열을 기준으로 정렬하는 함수를 구현한 것입니다. 전달된 매개변수 n은 정렬할 열 수를 나타냅니다.

테이블 필터링

테이블 필터링도 일반적인 작업입니다. 테이블의 데이터는 JavaScript를 통해 필터링할 수 있습니다.

다음은 예시입니다.

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

로그인 후 복사

위 코드는 입력 상자의 값을 기준으로 테이블 데이터를 필터링하는 함수를 구현합니다. 사용자 입력 상자에서 값을 가져온 다음 테이블의 각 셀 내용을 순회하여 내용에 사용자가 입력한 값이 포함되어 있으면 데이터 행이 유지되고 그렇지 않으면 숨겨집니다.

위 내용을 정리하면 테이블을 보다 편리하게 제어하고 운영할 수 있도록 일반적으로 사용되는 JavaScript 코드입니다. 물론 실제 개발에는 더 많은 기술과 방식이 있으니, 더 많이 탐색하고 시도해보시길 바랍니다.

위 내용은 자바스크립트로 테이블을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：자바스크립트는 브라우저에서만 실행 가능 다음 기사：자바스크립트는 나눗셈과 나머지를 인쇄합니다.

본 웹사이트의 성명

저자별 최신 기사