jquery로 테이블을 빠르게 업데이트하는 방법

프런트 엔드 개발에서는 테이블 표시가 매우 일반적입니다. 그러나 테이블의 데이터를 업데이트해야 할 때 DOM 요소를 직접 수정하는 등의 전통적인 방법을 사용하면 코드의 가독성과 유지 관리성이 매우 저하됩니다. 이때 jQuery 라이브러리의 출현으로 테이블을 빠르게 업데이트할 수 있는 솔루션이 제공되었습니다.

jQuery는 매우 인기 있는 JavaScript 라이브러리입니다. 주요 특징은 DOM을 우아하게 운영하고 대화형 페이지를 빠르게 구축하는 데 도움이 되는 간단하고 빠른 API를 제공한다는 것입니다. 그중 jQuery는 테이블의 데이터를 빠르게 업데이트하는 데 도움이 되는 다양한 편리한 방법을 제공합니다. 구체적인 구현을 단계별로 설명하겠습니다.

1. 테이블 개체 가져오기

테이블 업데이트를 시작하기 전에 먼저 테이블 개체를 가져와야 합니다. jQuery의 선택기를 사용하여 테이블 요소를 선택할 수 있습니다. 예를 들어, "table-data" 클래스의 식별자가 있는 테이블이 있는 경우 코드는 다음과 같습니다.

let table = $(".table-data");

이 테이블 개체를 통해 테이블에 대한 작업을 수행할 수 있습니다.

2. .text()를 사용하여 셀 내용 업데이트

셀의 텍스트 내용만 업데이트해야 하는 경우 .text() 메서드를 사용하여 완료할 수 있습니다. 선택기를 통해 수정하려는 셀 요소를 가져온 다음 text() 메서드를 사용하여 매개변수를 통해 업데이트해야 하는 텍스트 콘텐츠를 전달합니다. 예를 들어, 행 2와 열 3에 있는 셀의 텍스트를 "수정된 텍스트"로 수정합니다:

let td = table.find("tr:eq(1) td:eq(2)");
td.text("修改后的文本");

여기서는 :eq 선택기가 사용된다는 점에 유의해야 합니다. 이는 특정 일련 번호에 해당하는 요소를 선택한다는 의미입니다. 0부터 계산합니다. 따라서 tr:eq(1)은 테이블의 2행에 있는 요소를 선택하는 것을 의미하고, td:eq(2)는 3열의 셀 요소를 선택하는 것을 의미합니다.

3. .attr()을 사용하여 셀 속성을 업데이트하세요

셀의 텍스트 내용을 업데이트하는 것 외에도 때로는 셀의 속성도 업데이트해야 합니다. 예를 들어 셀의 data-* 속성을 업데이트하거나 셀의 클래스 속성 등을 수정해야 할 수도 있습니다. 이 시점에서는 .attr() 메서드를 사용하여 수행할 수 있습니다. 예를 들어 행 2와 열 3에 있는 셀의 data-id 속성을 123으로 수정합니다.

let td = table.find("tr:eq(1) td:eq(2)");
td.attr("data-id", "123");

여러 속성을 업데이트해야 하는 경우 값이 객체를 통해 전달될 수 있다는 점에 유의해야 합니다. 예를 들어, 2행 3열에 있는 셀의 클래스 속성과 데이터 ID 속성을 수정하려면 코드는 다음과 같습니다.

let td = table.find("tr:eq(1) td:eq(2)");
td.attr({
  "class": "new-class",
  "data-id": "123"
});

4 .html()을 사용하여 셀 내용을 업데이트합니다

가끔 업데이트할 때. 셀 내용, 업데이트해야 하는 내용에 HTML 태그가 포함되어 있는 경우 .html() 메서드를 사용할 수 있습니다. .text() 메서드를 사용하는 것과 유사하게 jQuery 선택기를 사용하여 업데이트해야 하는 셀을 선택한 다음 매개변수를 통해 업데이트해야 하는 HTML 코드를 전달할 수 있습니다. 예를 들어 행 2와 열 3의 셀 내용을 다음과 같이 수정합니다.

let td = table.find("tr:eq(1) td:eq(2)");
td.html("<a href='#'>链接文本</a>");

5. .replaceWith() 및 .replaceWith()를 사용하여 전체 행 내용을 업데이트합니다

때로는 셀이 위치한 경우 위의 방법을 사용하는 것은 약간 번거로울 것입니다. 이 시점에서 .replaceWith() 메서드를 사용하여 HTML 코드 전체 줄을 직접 바꿀 수 있습니다. 예를 들어 2행의 전체 내용을

let tr = table.find("tr:eq(1)");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

로 바꾸세요. 또한 특정 셀이 있는 전체 행만 수정해야 하는 경우 먼저 전체 행의 HTML 코드를 얻은 다음 셀이 위치한 행입니다.

let td = table.find("tr:eq(1) td:eq(2)");
let tr = td.parents("tr");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

6. .empty() 및 .append()를 사용하여 테이블 내용 업데이트

위 방법을 사용하여 셀을 하나씩 또는 전체 행을 업데이트하는 것 외에도 jQuery의 .empty() 및 .append() 테이블의 원래 내용을 지우고 새 HTML 코드를 추가하는 메서드입니다. 예를 들어 전체 테이블 내용을 새로운 HTML 코드로 교체하려면 다음 방법을 사용할 수 있습니다.

let newHtml = "<table><tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr></table>";
table.empty().append(newHtml);

위는 jQuery를 사용하여 테이블을 빠르게 업데이트하는 몇 가지 방법입니다. 이 방법을 통해 테이블을 편리하고 빠르게 업데이트할 수 있습니다. , 코드의 유지 관리 가능성도 향상되어 테이블의 데이터를 빠르게 수정하고 업데이트할 수 있습니다.

위 내용은 jquery로 테이블을 빠르게 업데이트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!