jquery로 테이블을 수정하는 방법

최근 몇 년 동안 웹 기술의 급속한 발전으로 jQuery는 프런트엔드 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나가 되었습니다. HTML 문서 관리, DOM 요소 운영, 이벤트 처리 등을 보다 쉽게 ​​수행하는 데 도움이 될 수 있습니다.

웹 개발 과정에서 테이블은 데이터를 표시하는 중요한 방법입니다. 그러나 때로는 양식을 수정하고 편집해야 하는 경우도 있습니다. jQuery는 테이블을 쉽게 수정할 수 있는 강력한 기능을 제공합니다. 다음으로 jquery를 사용하여 테이블을 수정하는 방법을 설명하겠습니다.

1. 동적으로 테이블 행 추가

일반적으로 페이지에는 실시간으로 추가하거나 삭제해야 하는 일부 테이블 행이 있습니다. 예를 들어, 쇼핑 웹 사이트의 장바구니 목록에서 사용자는 장바구니에 있는 항목을 추가하거나 삭제할 수 있습니다. 이 시점에서 매번 테이블 행을 수동으로 추가하고 삭제하는 것은 시간이 많이 걸리고 번거롭습니다. jQuery는 테이블 행을 동적으로 쉽게 추가하고 삭제할 수 있는 "append()", "prepend()", "after()" 및 "before()"와 같은 메서드를 제공합니다.

예를 들어 테이블에 행을 추가하려면 다음 코드를 사용할 수 있습니다.

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

위 코드를 실행하면 테이블의 마지막 행에 행이 추가됩니다. "새 행 데이터 1"과 "새 행 데이터 2"입니다.

2. 테이블 데이터를 동적으로 조작합니다

때때로 기존 테이블의 데이터를 수정해야 할 때가 있습니다. 예를 들어 테이블의 열에 있는 데이터를 업데이트해야 합니다. jQuery는 테이블 데이터를 쉽게 수정할 수 있도록 "text()" 및 "html()" 메서드를 제공합니다.

예를 들어 테이블의 두 번째 열에 있는 데이터를 수정하려면 다음 코드를 사용할 수 있습니다.

$("table tr td:nth-child(2)").text("新的数据");

위 코드는 테이블의 두 번째 열에 있는 모든 데이터를 "새 데이터"로 업데이트합니다. .

3. 테이블 정렬 기능 구현

데이터가 많은 테이블의 경우 일반적으로 사용자가 쉽게 데이터를 보고 비교할 수 있도록 테이블 정렬 기능을 제공합니다. 여기서는 jQuery UI 라이브러리의 "sortable" 메서드를 사용하여 테이블 정렬 기능을 매우 간단하게 구현할 수 있습니다.

예를 들어 다음과 같은 테이블이 있습니다.

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

다음 코드를 통해 테이블 ​​정렬을 구현할 수 있습니다.

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

그 중 "sortable()" 함수는 테이블에 드래그 가능한 함수를 추가하고 행을 드래그합니다. "자리 표시자"가 자리 표시자인 경우 행을 드래그하면 점유된 위치가 이 자리 표시자로 일시적으로 채워집니다.

위 코드가 실행된 후 테이블의 행을 자유롭게 드래그하여 테이블의 정렬 기능을 구현할 수 있습니다.

4. 테이블 데이터 실시간 검색

데이터량이 많은 일부 테이블에서는 사용자가 찾고자 하는 데이터를 빠르게 찾을 수 있도록 검색 기능을 제공할 수 있습니다. 여기서는 jQuery의 "filter" 메서드를 사용하여 테이블 데이터를 실시간으로 검색할 수 있습니다.

예를 들어 다음 테이블이 있습니다.

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

다음 코드를 사용하여 테이블 데이터의 실시간 검색을 구현할 수 있습니다.

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

위 코드에서 "keyup()" 메소드는 검색 변경 사항을 모니터링합니다. 상자 입력 상자입니다. 눌렀을 때 키보드를 눌렀을 때 트리거됩니다. 다음으로, 입력 상자에 키워드를 가져오고, "filter()"를 통해 일치하는 줄을 필터링하고, 마지막으로 "show()"를 통해 검색 결과를 표시합니다.

위의 방법을 통해 테이블을 쉽게 수정, 정렬, 검색하여 페이지의 사용자 경험을 향상시킬 수 있습니다.

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