jQuery를 사용하여 자동으로 동적 테이블 행 추가

제목: jQuery를 사용하여 동적으로 행을 추가하고 동적 테이블 만들기

웹 개발에서 동적으로 행을 추가하는 것은 일반적인 요구 사항이며, 특히 테이블을 만들 때 더욱 그렇습니다. jQuery의 강력한 기능을 통해 쉽게 동적으로 행을 추가하고 동적 테이블을 만들 수 있습니다. 다음으로 특정 코드 예제를 통해 이 기능을 구현하는 방법을 보여 드리겠습니다.

먼저 프로젝트에 jQuery를 도입했는지 확인하세요. 소개되지 않은 경우 다음 CDN 방식을 통해 소개할 수 있습니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

다음으로 이름과 나이가 포함된 동적 테이블을 생성하는 간단한 예를 보여드리겠습니다. 버튼을 통해 행의 동적 추가를 트리거합니다.

    
    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



    

        

            
姓名
            
年龄
        
    
    增加行

    <script>
        $(document).ready(function(){
            $("#addRow").click(function(){
                $("#myTable").append("<tr><td><input type='text' name='name'></td><td><input type='text' name='age'></td></tr>");
            });
        });
    </script>

위 코드에서는 먼저 빈 테이블을 만듭니다myTable，并定义了表头。然后创建了一个按钮addRow. 버튼을 클릭하면 jQuery는 버튼 클릭 이벤트를 수신하고 테이블에 새 행을 추가합니다. 버튼을 클릭할 때마다 이름과 나이를 입력하는 상자가 포함된 행이 추가됩니다.

위의 코드 예시를 통해 jQuery를 이용하여 동적으로 행을 추가하고 동적 테이블을 생성하는 기능을 성공적으로 구현했습니다. 이 방법은 간단하고 빠를 뿐만 아니라 많은 동적 테이블의 요구 사항도 충족할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바랍니다. 질문이 있으시면 토론을 위해 메시지를 남겨주세요.

위 내용은 jQuery를 사용하여 자동으로 동적 테이블 행 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!