使用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中文網其他相關文章！